Question

我有一个称为水果的表单组

 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个水果，则不允许选中任何（苹果/芒果）复选框。
如果水果的数量选择为1，则仅允许/至少选择一个复选框（苹果/芒果）
如果水果总数选择为2个或更多，则至少选择1个复选框（苹果/芒果/两者）。

我通过编写以下各个条件为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（请记住，在创建表单组后需要）。像

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

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

1 个答案: