forms - 如何使用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>

正如他们所说...



无论如何，几个月前我问this找出formControlName和[formControl]之间的区别是什么。

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

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

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

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

最佳答案

您可以使用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组成，并且层次结构可以继续进行，但是在访问值时，它相当简单。