web-dev-qa-db-fra.com

Comment utiliser formControlName et gérer le formGroup imbriqué?

Comme Angular documentation dit que nous pouvons utiliser formControlName dans nos formulaires:

<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate>
    <div class="form-group">
        <label class="center-block">Name:
            <input class="form-control" formControlName="name">
        </label>
    </div>
</form>

Comme ils disent...

Sans FormGroup parent, [formControl] = "nom" a fonctionné plus tôt car cette directive peut être autonome, c'est-à-dire qu'elle fonctionne sans être dans un FormGroup. Avec un FormGroup parent, l'entrée de nom a besoin de la syntaxe formControlName = nom pour être associée au FormControl correct dans la classe. Cette syntaxe indique Angular pour rechercher le FormGroup parent, dans ce cas heroForm, puis dans ce groupe pour rechercher un FormControl appelé nom.

Il y a quelques mois, j'ai demandé this pour comprendre quelle est la différence entre formControlName et [formControl].

Maintenant ma question est: qu'en est-il de l'utilisation de formControlName avec des FormGroups imbriqués?

Par exemple, si j'ai la structure de formulaire suivante:

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

Quelle est la bonne façon de lier "street" (ou "houseNumber" ou "postalCode") aux éléments HTML associés en utilisant formControlName?

formsangularangular-reactive-forms
39
smartmouse

vous pouvez utiliser le groupe Form qui est fondamentalement une collection de contrôles (les contrôles signifient les champs donnés dans votre formulaire html) définir dans votre syntaxe TypeScript et liés à vos éléments HTML en utilisant la directive formControlName, par exemple

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

Modèle:

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

Un formGroup peut être constitué d'un formGroup imbriqué et la hiérarchie peut continuer, mais en accédant à la valeur, c'est assez simple.

72
Somdatt_Bhadvariya

C'est vrai. Regardez formGroupName

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>
14
Albert Nizamutdinov