有条件地为表单组控件选择复选框

Question

我创建了一个名为 fruits 的表单组

 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>

我想按如下方式执行验证：

如果选择了 0 个水果，则不允许选择任何（apple/mangoes）复选框。
如果为水果数量选择 1，则允许 only/at 至少选中一个复选框（apple/mango）
如果为水果总数选择了 2 个或更多，则至少要选中 1 个复选框（apple/mangoes/两者）。

我通过如下编写个人条件为组 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);
}

有没有更好更有效的方法来实现？

Answer 1

我认为订阅 group.valueChanges 更好（记住您需要在创建 formGroup 之后订阅 ）。有些喜欢

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

有条件地为表单组控件选择复选框

Alternate checkbox selection conditionally for formgroup controls

angularjs

angular-material

angular-validation

angular