正如 Angular 文档所说，我们可以使用 formControlName 在我们的表单中:
英雄详情
<h3><i>FormGroup中的FormControl</i></h3><form [formGroup]="heroForm" novalidate><div class="form-group"><label class="center-block">名称:<input class="form-control" formControlName="name"></表单>
正如他们所说...
在没有父 FormGroup 的情况下，[formControl]="name" 可以更早地工作，因为该指令可以独立存在，也就是说，它可以在没有 FormGroup 的情况下工作.对于父 FormGroup，名称输入需要语法 formControlName=name 才能与类中的正确 FormControl 关联.此语法告诉 Angular 查找父 FormGroup，在本例中为 heroForm，然后在该组中查找名为 name 的 FormControl.
无论如何，几个月前我问这个formControlName 和 [formControl] 有什么区别.
现在我的问题是:如何将 formControlName 与嵌套的 FormGroup 结合使用?
例如，如果我有以下表单结构:
this.myForm = fb.group({'全名': ['', Validators.required],'性别': []，'地址':fb.group({'街道': ['']，'门牌号码': ['']，'邮政编码': ['']})});使用 formControlName 将street"(或houseNumber"或postalCode")绑定到相关 HTML 元素的正确方法是什么?
您可以使用 Form 组，它基本上是一组控件(控件表示 html 表单中给出的字段)在您的打字稿语法中定义并绑定到您的 HTML使用 formControlName 指令的元素，例如
this.myForm = fb.group({'全名': ['', Validators.required],'性别': []，'地址':fb.group({'街道': ['']，'门牌号码': ['']，'邮政编码': ['']})});模板:
<form [formGroup]="myForm" ><div class="form-group"><label for="fullname">用户名</label><input type="text" id="username" formControlName="fullname" class="form-control"><div class="radio" *ngFor="让性别的性别"><标签><input type="radio" formControlName="gender" [value]="gender">{{gender }} </label>
<div formGroupName="地址"><div class="form-group"><label for="street">用户名</label><input type="text" id="username" value="street" formControlName="street" class="form-control">
<div class="form-group"><label for="houseNumber">用户名</label><input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">
<div class="form-group"><label for="postalCode">用户名</label><input type="text" id="username" value="street" formControlName="postalCode" class="form-control">
</表单>
一个 formGroup 可以由一个嵌套的 formGroup 组成，层次结构可以继续，但在访问值时它相当简单.
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...
Anyway some months ago I asked this to figure out what is the difference between formControlName and [formControl].
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': ['']
})
});
What is the right way to bind "street" (or "houseNumber" or "postalCode") to related HTML elements using 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': ['']
})
});
Template:
<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>
A formGroup can consist of a nested formGroup and hierarchy can continue on ,but in accessing the value the its fairly simple .
这篇关于如何使用formControlName 处理嵌套的formGroup?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！