时间戳

首页 > 解决方案 > 有条件地为表单组控件替代复选框选择

angularjs - 有条件地为表单组控件替代复选框选择

问题描述

我创建了一个名为 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>

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

  1. 如果选择了 0 个水果，则不允许选择任何（苹果/芒果）复选框。
  2. 如果为水果数量选择 1，则只允许/至少选择一个复选框（苹果/芒果）
  3. 如果为水果总数选择了 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);
}

有没有更好更有效的方法来实现这一目标？

标签： angularjsangularangular-materialangular-validation

解决方案

我认为最好订阅 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 的时间

推荐阅读