Выбор альтернативного флажка условно для элементов управления группы форм

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>

Я бы хотел выполнить проверку следующим образом:

1. Если выбрано 0 плодов, то не разрешать устанавливать какие-либо флажки (яблоки / манго).
2. Если для числа плодов выбрано 1, разрешите / хотя бы один флажок выбран (либо яблоко / человек go)
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);
}

Существует ли лучший и эффективный способ достижения этого?

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;
   }
})

И вам нужно создать собственную форму проверки для контроля, когда numberOfFruits> 2