正如我在标题中已经写的那样,是否可以有一个包含多个 FormControl 的表单组,并且当并非所有控件都有效时该组也有效?
private moreInfoForm : FormGroup = this.formBuilder.group({
location: this.formBuilder.group({
predefined: [''],
custom: ['']
}),
demand_room: ['', [Validators.required]],
motivation: ['', Validators.required],
expectaions: ['', [Validators.required]],
participation: this.formBuilder.group({
all: [''],
wednesday: [''],
thursday: [''],
friday: [''],
saturday: ['']
}),
donations: ['', Validators.required],
comments: ['', Validators.required]
});
https://plnkr.co/edit/v1v6UTrLypFqLpI1KNo7
对于位置组,我有预定义和自定义字段。 对于预定义,有一个输入字段;对于自定义,有一个输入字段。 当用户选择“预定义”或“自定义”时,是否可以验证组。
另一个是关于参与。 这些是复选框,当用户选中其中一个复选框时,表单应该有效。
谢谢。
您可以使用自定义验证器来检查
predefined
或 custom
是否具有值,这里我们称之为 validateGroup
:
location: this.formBuilder.group({
predefined : [''],
custom : ['']
},{
validator: (formGroup: FormGroup) => {
return this.validateGroup(formGroup);
}
}),
相应的函数检查是否已填充,如果有效则返回
null
:
private validateGroup(formGroup: FormGroup) {
for (let key in formGroup.controls) {
if (formGroup.controls.hasOwnProperty(key)) {
let control: FormControl = <FormControl>formGroup.controls[key];
if (control.value) {
return null;
}
}
}
return {
validateGroup: {
valid: false
}
};
}
同样的功能,
validateGroup
您可以在日常生活中使用,所以您的最终表单将如下所示:
private moreInfoForm : FormGroup = this.formBuilder.group({
location: this.formBuilder.group({
predefined : [''],
custom : ['']
},{
validator: (formGroup: FormGroup) => {
return this.validateGroup(formGroup);
}
}),
demand_room : ['', [Validators.required]],
motivation : ['', Validators.required],
expectaions : ['', [Validators.required]],
participation : this.formBuilder.group({
all : [''],
wednesday : [''],
thursday : [''],
friday : [''],
saturday : ['']
},{
validator: (formGroup: FormGroup) => {
return this.validateGroup(formGroup);
}
}),
donations : ['', Validators.required],
comments : ['', Validators.required]
});
您可以在本页阅读有关上述内容的更多信息。
这是你的叉子
PS。请注意我对单选按钮所做的更改,以便将其正确添加到您的表单中:
demand_rooms = ['Yes','No'];
<label *ngFor="let demand_room of demand_rooms">
<input type="radio" name="demand_room" formControlName="demand_room" [value]="demand_room">Yes
</label>