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

本文介绍了如何使用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...

在没有父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 .