本文介绍了Angular FormBuilder多个FormGroups的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有2个发件人组(用户和地址)的表单
I have a form with 2 FromGroups (User & Address)
我收到以下错误:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find control with name: 'street'
我上这堂课的时候
export class FormBuilderComp {
addUserFrom: FormGroup;
constructor( @Inject(FormBuilder) fb: FormBuilder) {
this.addUserFrom = fb.group({
userGroup: fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
phone: ['', Validators.required]
}),
addressGroup: fb.group({
street: ['', Validators.required],
suite: ['', Validators.required],
city: ['', Validators.required],
zipCode: ['', Validators.required]
})
});
}
}
...但是,如果我取出其中一个嵌套的FormGroup,如
...But if I take out one of the nested FormGroups as in
export class FormBuilderComp {
addUserFrom: FormGroup;
constructor( @Inject(FormBuilder) fb: FormBuilder) {
this.addUserFrom = fb.group({
userGroup: fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
phone: ['', Validators.required]
}),
street: ['', Validators.required],
suite: ['', Validators.required],
city: ['', Validators.required],
zipCode: ['', Validators.required]
});
}
}
错误消失.
是否有关于不存在多个嵌套的FromGroup的规则?
Is there some rule about not having more than one nested FromGroup??
以下是相关的
<form [formGroup]="addUserFrom">
<fieldset formGroupName="userGroup">
<legend>User</legend>
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
class="form-control"
id="name"
formControlName="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="text"
class="form-control"
id="email"
formControlName="email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input
type="text"
class="form-control"
id="phone"
formControlName="phone">
</div>
</fieldset>
<fieldset fromGroupName="addressGroup">
<legend>Address</legend>
<div class="form-group">
<label for="street">Street</label>
<input
type="text"
class="form-control"
id="street"
formControlName="street">
</div>
<div class="form-group">
<label for="suite">Suite</label>
<input
type="text"
class="form-control"
id="suite"
formControlName="suite">
</div>
<div class="form-group">
<label for="city">City</label>
<input
type="text"
class="form-control"
id="city"
formControlName="city">
</div>
<div class="form-group">
<label for="zipCode">Zip Code</label>
<input
type="text"
class="form-control"
id="zipCode"
formControlName="zipCode">
</div>
</fieldset>
<button>Submit</button>
</form>
推荐答案
您的html中有拼写错误,请将fromGroupName
更改为formGroupName
.
There is typo in your html, change fromGroupName
to formGroupName
.
这篇关于Angular FormBuilder多个FormGroups的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!