formControlNameを使用して、ネストしたformGroupを処理するにはどうすればよいですか？

質問

Angularとして ドキュメント を使うことができると書いてあります。 formControlName を使えると書いてあります。

<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>

よく言われるように...

親フォームグループがない場合、[formControl]="name" は先に動作しましたが、これはこのディレクティブが単独で、つまり、フォームグループ内になくても動作することが理由です。親フォームグループの場合、名前入力はクラス内の正しい FormControl と関連付けられるように formControlName=name という構文が必要になります。この構文は Angular に親フォームグループ（この場合は heroForm）を探し、その中から name という名前の FormControl を探すように指示します。

とにかく何ヶ月か前に私は この との違いは何なのかを調べるために formControlName と [formControl] .

さて、私の疑問は formControlName をネストされた FormGroups と一緒に使うのはどうでしょうか？

例えば、以下のようなフォーム構成があった場合。

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

を使用して、"street" (または "houseNumber" または "postalCode") を関連する HTML 要素に結合する正しい方法は何でしょうか? formControlName ?

どのように解決するのですか？

フォームグループは基本的にコントロールの集まりです。（コントロールとはhtmlフォームにあるフィールドのことです）タイプスクリプトの構文で定義し、formControlNameディレクティブを使ってHTML要素にバインドします。

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>

formGroupはネストされたformGroupで構成され、階層はさらに続きますが、値にアクセスするのはかなり簡単です。