Comment obtenir des valeurs de formulaire

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.htmlnous é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 onSubmitnous 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.tsnous é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.htmlnous é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.