如何使用formControlName和处理嵌套formGroup？
如何使用formControlName和处理嵌套formGroup？
提问于 2017-06-12 12:24:20
正如角文档所说的那样，我们可以在表单中使用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>就像他们说的..。
在没有父FormGroup的情况下，formControl=的“名称”更早地起作用了，因为该指令可以独立运行，也就是说，它不存在于FormGroup中。对于父FormGroup，名称输入需要语法formControlName=name才能与类中正确的FormControl关联。这个语法告诉角查找父FormGroup，在本例中是heroForm，然后在该组中查找名为FormControl的FormControl。
无论如何，几个月前，我要求这找出formControlName和[formControl]之间的区别。
现在我的问题是:如何在嵌套的formControlName中使用FormGroups？
例如，如果我有以下表单结构：
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': [],
'address': fb.group({
'street': [''],
'houseNumber': [''],
'postalCode': ['']
})
});使用houseNumber将"street“(或"postalCode")绑定到相关的formControlName元素的正确方法是什么？
Stack Overflow用户
回答已采纳
发布于 2017-09-25 15:01:03
您可以使用表单组，它基本上是控件的集合(控件是指在html表单中给出的字段)，定义在类型记录语法中，并使用formControlName指令绑定到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和层次结构组成，但是在访问它的值时，它相当简单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44499425
复制相关文章
相似问题
腾讯云开发者
