Aujourd’hui, nous verrons comment créer des formulaires dans Angular avec des formulaires réactifs et des formulaires basés sur des modèles et obtenir des valeurs des deux.
Les formulaires sont des éléments de base de toute application Web, et Angular nous fournit des moyens de créer des formulaires avec validation sans ajouter de nouvelle bibliothèque.
Dans cet article, nous verrons comment créer des formulaires dans Angular et obtenir des valeurs de formulaire.
Types de formes angulaires
Il existe deux types de formes angulaires.
Un type est les formes réactives. Les formulaires réactifs nous permettent de créer des formulaires avec un moyen d’accéder aux valeurs du formulaire directement à partir de l’objet du formulaire. Ils sont plus évolutifs et réutilisables, c’est donc la méthode préférée pour créer des formulaires. Le flux de données est synchrone et le modèle de données de formulaire est immuable.
Un autre type de formulaire est celui des formulaires basés sur des modèles. Les formulaires basés sur des modèles lient les valeurs de formulaire à des variables auxquelles nous pouvons accéder avec des directives. Nous accédons aux valeurs des formulaires en utilisant les variables auxquelles les contrôles de formulaire sont liés. Le modèle de données de formulaire est modifiable avec les formulaires basés sur des modèles.
Obtenir des valeurs de formulaire avec des formulaires réactifs
Pour créer des formulaires réactifs dans notre application Angular, nous utilisons le ReactiveFormsModule
. Pour ce faire, nous écrivons ce qui suit dans app.module.ts
:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Nous ajoutons le ReactiveFormsModule
dans imports
afin que nous puissions l’utiliser avec des composants dans AppModule
pour créer des formulaires réactifs.
Nous pouvons maintenant créer notre premier formulaire réactif. Pour ce faire, nous écrivons ce qui suit dans app.component.ts
:
import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = new FormControl("bob");
updateName() {
this.name.setValue("jane");
console.log(this.name.getRawValue());
}
}
Nous ajoutons le name
contrôle de formulaire avec le FormControl
classe. L’argument du constructeur est la valeur initiale du name
champ.
Dans le updateName
méthode, nous appelons setValue
pour définir la valeur d’entrée de name
. Et nous obtenons la valeur d’entrée après l’avoir définie avec getRawValue
.
Puis dans app.component.html
nous écrivons:
<form>
<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name" />
</form>
<button type="button" (click)="updateName()">Update Name</button>
pour ajouter un formulaire avec une entrée. Nous fixons [formControl]
pour name
de sorte que la name
FormControl
instance est liée à l’entrée.
Ensuite, lorsque nous tapons quelque chose, le name
FormControl
instance aura la valeur d’entrée que nous avons tapée. Et nous pouvons également obtenir et définir la valeur d’entrée à partir de notre composant.
Nous ajoutons également un bouton qui appelle updateName
quand on clique dessus. Maintenant, lorsque nous cliquons sur le bouton, updateName
est appelé. setValue
met à jour la valeur du formulaire à 'jane'
. Et nous appelons getRawValue
pour renvoyer la dernière valeur d’entrée de l’entrée, qui est 'jane'
.
En règle générale, un formulaire comporte plusieurs contrôles de formulaire. On peut les regrouper avec FormGroup
. Pour ce faire, nous utilisons le FormGroup
classe:
app.component.html
import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
personForm = new FormGroup({
name: new FormControl("bob"),
age: new FormControl(100)
});
onSubmit() {
console.log(this.personForm.value);
}
}
pour ajouter un FormGroup
exemple.
Nous appelons FormGroup
avec un objet avec les champs de formulaire que nous créons avec le FormControl
classe.
Ensuite, nous créons un formulaire et le lions au FormGroup
en écrivant:
<form [formGroup]="personForm" (ngSubmit)="onSubmit()">
<label for="name">Name: </label>
<input id="name" type="text" formControlName="name" />
<br />
<label for="age">Age: </label>
<input id="age" type="number" formControlName="age" />
<br />
<button type="submit">Submit</button>
</form>
Nous fixons [formGroup]
pour personForm
pour lier le formulaire au groupe de formulaires que nous venons de créer.
Et nous fixons le formControlName
attribut au lieu de formControl
pour lier les entrées aux contrôles de formulaire dans le groupe de formulaires.
Ensuite, nous ajoutons un bouton d’envoi et définissons (ngSubmit)
pour onSubmit
donc onSubmit
est appelé lorsque nous soumettons le formulaire. Dans onSubmit
nous obtenons les valeurs d’entrée du formulaire avec this.personForm.value
.
En conséquence, nous devrions voir un objet avec le name
et age
properties avec la valeur d’entrée pour chacune lorsque nous soumettons le formulaire.
Les groupes de formulaires peuvent être imbriqués, nous définissons simplement le champ de formulaire sur un groupe de formulaires.
Par exemple, nous écrivons :
import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
personForm = new FormGroup({
name: new FormControl("bob"),
age: new FormControl(100),
address: new FormGroup({
street: new FormControl(""),
city: new FormControl(""),
region: new FormControl("")
})
});
onSubmit() {
console.log(this.personForm.value);
}
}
pour ajouter le address
former un groupe pour personForm
former un groupe.
Puis nous écrivons :
app.component.html
<form [formGroup]="personForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Name: </label>
<input id="name" type="text" formControlName="name" />
</div>
<div>
<label for="age">Age: </label>
<input id="age" type="number" formControlName="age" />
</div>
<div formGroupName="address">
<h2>Address</h2>
<div>
<label for="street">Street: </label>
<input id="street" type="text" formControlName="street" />
</div>
<div>
<label for="city">City: </label>
<input id="city" type="text" formControlName="city" />
</div>
<div>
<label for="region">Region: </label>
<input id="region" type="text" formControlName="region" />
</div>
</div>
<button type="submit">Submit</button>
</form>
utiliser le address
former un groupe par paramètre formGroupName
pour address
. Et nous fixons formControlName
au nom du contrôle de formulaire comme d’habitude.
Le reste du formulaire est le même que le précédent.
Par conséquent, lorsque nous soumettons le formulaire après avoir entré certaines valeurs, nous obtenons quelque chose comme :
{
"name": "bob",
"age": 100,
"address": {
"street": "abc",
"city": "abc",
"region": "abc"
}
}
connecté depuis onSubmit
.
Formulaires basés sur des modèles
Une autre façon de créer des formulaires est les formulaires basés sur des modèles.
Nous utilisons le NgModel
, NgForm
et NgModelGroup
directives pour lier les formulaires et les valeurs d’entrée aux variables de composant.
Pour ajouter des formulaires basés sur des modèles, nous ajoutons le FormsModule
pour AppModule
afin que nous puissions les ajouter AppModule
.
Pour ce faire, nous écrivons :
app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Ensuite, nous pouvons créer notre formulaire.
Pour ce faire, en app.component.ts
nous écrivons:
import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
person = {
name: "bob",
age: 100,
address: {
street: "",
city: "",
region: ""
}
};
onSubmit() {
console.log(JSON.stringify(this.person, undefined, 2));
}
}
pour ajouter le person
variable à AppComponent
. Notre formulaire se liera aux propriétés dans person
afin que nous puissions obtenir des valeurs d’entrée en référençant person
.
Ensuite, en app.component.html
nous écrivons:
<form #personForm="ngForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Name: </label>
<input name="name" type="text" [(ngModel)]="person.name" />
</div>
<div>
<label for="age">Age: </label>
<input name="age" type="number" [(ngModel)]="person.age" />
</div>
<div>
<h2>Address</h2>
<div>
<label for="street">Street: </label>
<input name="street" type="text" [(ngModel)]="person.address.street" />
</div>
<div>
<label for="city">City: </label>
<input name="city" type="text" [(ngModel)]="person.address.city" />
</div>
<div>
<label for="region">Region: </label>
<input name="region" type="text" [(ngModel)]="person.address.region" />
</div>
</div>
<button type="submit">Submit</button>
</form>
Nous ajoutons #personForm="ngForm"
pour définir le nom du formulaire sur personForm
et désignez-le comme formulaire basé sur un modèle.
(ngSubmit)
est toujours utilisé pour écouter les événements de soumission de formulaire avec des formulaires basés sur des modèles.
Ensuite, pour lier les valeurs d’entrée des contrôles de formulaire aux variables du composant, nous définissons le name
attribut de chaque entrée à une valeur. name
doit être défini pour qu’Angular puisse lier la valeur d’entrée à la variable de modèle.
Puis nous fixons [(ngModel)]
à la propriété de person
auquel nous voulons nous lier. person
est le person
variable dans
app.component.ts
.
Maintenant, lorsque nous tapons quelque chose et que nous cliquons sur Soumettre, nous obtenons quelque chose comme :
{
"name": "bob",
"age": 100,
"address": {
"street": "abc",
"city": "abc",
"region": "abc"
}
}
être connecté par console.log
.
Nous obtenons simplement les valeurs d’entrée de la person
directement l’objet module.
Conclusion
Les formulaires sont des éléments de base de toute application Web. Et Angular nous fournit des moyens de créer des formulaires avec validation sans ajouter de nouvelle bibliothèque.
Nous pouvons créer des formulaires avec des formulaires réactifs ou des formulaires basés sur des modèles. Il est facile d’obtenir des valeurs d’entrée de formulaire avec l’un ou l’autre type de formulaire.
Avec les formulaires réactifs, nous utilisons les classes fournies par le @angular/forms
module pour créer les objets de contrôle de formulaire et de groupe de formulaires et obtenir les valeurs de formulaire avec les méthodes fournies par les instances de ces classes.
Avec les formulaires basés sur des modèles, nous utilisons [(ngModel)]
pour lier l’entrée à une variable de modèle afin que nous puissions obtenir la valeur d’entrée de la variable de modèle à laquelle elle est liée.
Source link