Как отключить элемент управления формой на основе значения другого элемента управления формой прямо при инициализации на реактивных формах angular?

Question

У меня есть 2 элемента управления формой, один из которых выбирается, другой - поле ввода:

      <form  [formGroup]="timeForm">
          <div>
            <mat-form-field appearance="outline" class="fullInputWidth">
              <mat-label>Sunday</mat-label>

              <mat-select formControlName="SundayStatus">
                <mat-option value="Opened">Opened</mat-option>
                <mat-option value="Closed">Closed</mat-option>
              </mat-select>
            </mat-form-field>
          </div>

          <div>
            <mat-form-field appearance="outline" class="fullInputWidth">
              <mat-label>Opens at</mat-label>
              <input formControlName="SundayOpen" name="SundayOpen" matInput autocomplete="off" [format]="24" [ngxTimepicker]="SundayOpen" readonly > 
              <ngx-material-timepicker #SundayOpen [minutesGap]="15"></ngx-material-timepicker>
            </mat-form-field>
          </div>
       </form>

Внутри моего компонента у меня есть:

  this.timeForm = this.formBuilder.group({
      SundayStatus: ['Closed'],
      SundayOpen: [''] 
}):

Поэтому я хочу отключить formcontrol: ' SundayOpen ', когда значение элемента управления' SundayStatus 'равно' Closed '.

Теперь проблема в том, что значение' SundayStatus 'уже инициализировано как' Closed '.

Если я поставлю этот код на входе #SundayOpen:

[disabled]="timeForm.get('SundayStatus').value == 'Closed'"

Он не отключает элемент управления в первый раз, но работает, когда я изменяю значение раскрывающегося списка на 'Opened' ==> 'Closed'

Помогите!

Answer 1

Вы должны прослушать valueChanges:

const sundayStatusControl = this.timeForm.get('SundayStatus');
sundayStatusControl.valueChanges.pipe(
  takeUntil(this._ngOnDestroy$)
).subscribe(newStatus => {
  if (newStatus === 'Closed') {
    this.timeForm.get('SundayOpen').disable();
  } else {
    this.timeForm.get('SundayOpen').enable();
  }
});
sundayStatusControl.updateValueAndValidity();

Если у вас есть 7 элементов управления формой, вы можете сгруппировать их в al oop:

const days = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thirsday',
  'Friday',
  'Saturday',
  'Sunday'
]
for (const day of days) {
  const control = this.timeForm.get(`${day}Status`);
  control.valueChanges.pipe(
    takeUntil(this._ngResetForm$)
  ).subscribe(newStatus => {
    if (newStatus === 'Closed') {
      this.timeForm.get(`${day}Open`).disable();
    } else {
      this.timeForm.get(`${day}Open`).enable();
    }
  });
  control.updateValueAndValidity();
}