我有一个称为水果的表单组
fruits: FormGroup = formBuilder.group({
numberOfFruits: [0,Validators.min(0)],
apple: false,
mangoes: false
});
和html如下:
<div formGroupName="fruits">
<div>
<p>Key in the number of fruits you want to select</p>
</div>
<div>
<input readonly matInput formControlName="numberOfFruits" type="number">
</div>
<mat-checkbox formControlName="apple">Apple</mat-checkbox>
<mat-checkbox formControlName="mangoes">Mangoes</mat-checkbox>
</div>
我想要执行以下验证:
我通过编写以下各个条件为fruits
组创建了一个验证:
if (group.controls['numberOfFruits'].value === 1 || (group.controls['numberOfFruits'].value == 2 &&
group.controls['apple'].value === true)) {
group.controls['mangoes'].patchValue(false);
}
if (group.controls['numberOfFruits '].value == 1 || (group.controls['numberOfFruits'].value == 2 && group.controls['mangoes'].value === true)) {
group.controls['apple'].patchValue(false);
}
有没有更好,更有效的方法来实现这一目标?
答案 0 :(得分:0)
我认为最好订阅group.valueChanges(请记住,在创建表单组后需要 )。像
group.valuesChange.subscribe(res=>{
if (res.numberOfFuits>=1)
{
..enable apple and mangos..
if (res.numberOfFuits==1)
{
if apple, mangos=false; //<--remember {emitEvent:false}
if mangos, apple=false
}
}
else
{
disable apple and mangos and set value to false;
}
})
并且您需要进行自定义formValidation来控制何时numberOfFruits> 2