如何使用formControlName并处理嵌套的formGroup?

问题描述

正如Angular 文档所述，我们可以使用formControlName以我们的形式:

As Angular documentation says we can use formControlName in our forms:

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

正如他们所说的...

As they say...

几个月前，我无论如何都问过这个来计算找出formControlName和[formControl]之间的区别.

Anyway some months ago I asked this to figure out what is the difference between formControlName and [formControl].

现在我的问题是:将formControlName与嵌套FormGroups一起使用怎么办?

Now my question is: what about use formControlName with nested FormGroups?

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

For example, if I have the following form structure:

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

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

What is the right way to bind "street" (or "houseNumber" or "postalCode") to related HTML elements using formControlName?

推荐答案

您可以使用Form组，该组基本上是控件的集合(控件是指HTML表单中给出的字段)，是在您的打字稿语法中定义并绑定到HTML的使用formControlName指令的元素，例如

you can use Form group which is basically a collection of controls ( controls mean the fields given in your html form) define in your typescript syntax and binded to your HTML elements using the formControlName directive ,for example

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

A formGroup can consist of a nested formGroup and hierarchy can continue on ,but in accessing the value the its fairly simple .

这篇关于如何使用formControlName并处理嵌套的formGroup?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！