如何使用formControlName和处理嵌套formGroup？
正如角文档所说的那样，我们可以在表单中使用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元素的正确方法是什么？
回答 4
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用户
发布于 2018-03-20 09:15:36
这是真的。看看formGroupName
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>Stack Overflow用户
发布于 2020-04-07 14:27:39
tl;dr：
您可以将表单分解为使用嵌套的formcontrolname窗体组的组件，并且可以正常使用。
我倾向于使用的方法，因为通常使用嵌套的formgroup来指定表单的不同部分，就是将其分解为组件，并将嵌套的formgroup作为输入参数传递给这些组件。因此，在您的示例中，我将有一个以your组作为参数的address组件：
<app-address [formGroup]="myForm.get('address')"></app-address在这个组件的内部，我只需要一个@ just () formGroup，它将在html中使用：
<div [formGroup]="formGroup">
....这样，您就可以像通常一样显式地引用控件名称，因为它将是此表单组的一部分。
此外，请记住表单是作为引用传递的。您的更改将在父组件的myForm元素中进行考虑，如果您需要访问表单组中未包含的部分(验证、更改检测等)，则始终可以传递整个表单，只需定义form组来显式引用内部组：
<div [formGroup]="formGroup.get('adress')">(假设您传递了整个form对象，即
编码愉快！
https://stackoverflow.com/questions/44499425
复制相似问题
腾讯云开发者
