如何使用formControlName并处理嵌套的formGroup? [英] How to use formControlName and deal with nested 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...

在没有父FormGroup的情况下，[formControl] ="name"可以更早地工作，因为该指令可以独立存在，也就是说，它可以不在FormGroup中工作.对于父FormGroup，名称输入需要语法formControlName = name以便与类中的正确FormControl关联.这种语法告诉Angular查找父FormGroup(在本例中为heroForm)，然后在该组内部查找名为name的FormControl.

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.

几个月前，我无论如何都问过这个来计算找出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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！