如何在初始化反应角度表单时根据另一个表单控件的值禁用表单控件？

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: [''] 
}):

所以我想在控件“SundayStatus”的值为“Closed”时禁用表单控件：“SundayOpen”。

现在的问题是“SundayStatus”的值已经初始化为“Closed”。

如果我将此代码放在输入#SundayOpen：

[disabled]="timeForm.get('SundayStatus').value == '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 个表单控件，你可以将它们组合成一个循环：

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