gpt4 book ai didi

当不是所有的 FormControls 都有效时,Angular 2 FormGroup 有效

转载 作者:行者123 更新时间:2023-12-04 14:26:27 24 4
gpt4 key购买 nike

正如我在标题中所写的那样,是否可以拥有一个包含多个 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

对于位置组,我有一个预定义字段和自定义字段。对于预定义,有一个输入字段,对于自定义,有一个输入字段。当用户选择“预定义”或“自定义”时是否可以验证组。

另一个是关于参与。这些是复选框,当用户选中其中一个复选框时,表单应该有效。

谢谢。

最佳答案

您可以使用自定义验证器来检查 predefinedcustom 是否有值,这里我们称之为 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]
});

您可以阅读更多有关上述内容的信息,on this page .

这是你的 fork

Plunker

附言。请注意我还对单选按钮所做的更改,以便将其正确添加到您的表单中:

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>

关于当不是所有的 FormControls 都有效时,Angular 2 FormGroup 有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42916080/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com