Comment utiliser formControlName et de traiter avec imbriqué formGroup?

Comme Angulaire la 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 un parent FormGroup, [formControl]="nom" travaillé plus tôt parce que la directive soit autonome, qui est, il fonctionne sans être dans un FormGroup. Avec un parent FormGroup, le nom de l'entrée besoins de la syntaxe formControlName=nom afin d'être associée à la bonne FormControl dans la classe. Cette syntaxe indique Angulaire de regarder pour le parent FormGroup, dans ce cas heroForm, et puis à l'intérieur de ce groupe pour chercher un FormControl appelé nom.

De toute façon il y a quelques mois j'ai demandé à cette à comprendre quelle est la différence entre formControlName et [formControl].

Maintenant, ma question est: quid de l'utilisation formControlName avec imbriqué FormGroups?

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

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

Quelle est la bonne façon de se lier à "la rue" (ou "houseNumber" ou "postalCode") liés à des éléments HTML à l'aide de formControlName?

Utilisation formGroupName stackoverflow.com/questions/44431613/...
le commentaire de @yurzui est la solution, simple d'utilisation formGroupName dans votre imbriquée modèles html avant d'accéder à la formControlName en tant qu'enfant de l'élément html

OriginalL'auteur smartmouse | 2017-06-12

  1. 38

    vous pouvez utiliser le Formulaire de groupe qui est essentiellement une collection de contrôles ( contrôles de champs de ton formulaire html) définir dans votre tapuscrit de la syntaxe et de la lier à vos éléments HTML à l'aide de la formControlName la directive ,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 consister en un imbriquée formGroup et de la hiérarchie peut continuer ,mais en accédant à la valeur que le son assez simple .

    ng-container est une chose à garder à l'esprit si vous ne voulez pas mettre physiquement div dans votre modèle, par exemple, pour aligner les éléments avec flex. Il serait peut-être bon de l'inclure dans la réponse.

    OriginalL'auteur Somdatt_Bhadvariya

  2. 11

    Il 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>
    Cela a fonctionné pour moi avec ng6 et <ng-container formGroupName="quintessence">.

    OriginalL'auteur Albert Nizamutdinov