forms - 如何使用 formControlName 和处理嵌套的 formGroup？

Question

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

正如他们所说...

Without a parent FormGroup, [formControl]="name" worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent FormGroup, the name input needs the syntax formControlName=name in order to be associated with the correct FormControl in the class. This syntax tells Angular to look for the parent FormGroup, in this case heroForm, and then inside that group to look for a FormControl called name.

反正几个月前我问过this找出 formControlName 和 [formControl] 之间的区别。

现在我的问题是:将 formControlName 与嵌套的 FormGroup 一起使用怎么样？

例如，如果我有以下表单结构:

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

使用 formControlName 将“street”(或“houseNumber”或“postalCode”)绑定(bind)到相关 HTML 元素的正确方法是什么？

Answer 1

您可以使用 Form 组，它基本上是控件的集合(控件表示您的 html 表单中给出的字段)在您的 typescript 语法中定义并使用 formControlName 指令绑定(bind)到您的 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 组成，层次结构可以继续，但是在访问值时它相当简单。