web-dev-qa-db-ja.com

formControlNameを使用してネストされたformGroupを処理する方法は？

Angular documentation は、フォームで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>

彼らが言うように...

親のFormGroupがなければ、[formControl] = "name"は以前に機能しました。これは、そのディレクティブが独立しているためです。つまり、FormGroup内になくても機能します。親のFormGroupを使用する場合、名前入力には、クラスの正しいFormControlに関連付けるために、構文formControlName = nameが必要です。この構文は、Angularに親FormGroup、この場合はheroFormを探すように指示し、次にそのグループ内でnameという名前のFormControlを探すように指示します。

とにかく数ヶ月前、私は this にformControlNameと[formControl]の違いを理解するように頼みました。

今私の質問です：ネストされたFormGroupでformControlNameを使用することはどうですか？

たとえば、次のフォーム構造があるとします。

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

formControlNameを使用して「ストリート」（または「houseNumber」または「postalCode」）を関連するHTML要素にバインドする正しい方法は何ですか？

formsangularangular-reactive-forms
39
smartmouse

typeScript構文で定義され、formControlNameディレクティブを使用してHTML要素にバインドされた、基本的にコントロールのコレクションであるFormグ​​ループを使用できます（コントロールとは、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で構成することができ、階層を続けることができますが、値へのアクセスはかなり簡単です。

72
Somdatt_Bhadvariya

それは本当です。見てください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