如何在响应式Angular表单的初始化时根据另一个表单控件的值禁用一个表单控件？

Question

如何在响应式Angular表单的初始化时根据另一个表单控件的值禁用一个表单控件？

3

我有两个表单控件，一个是选择框，另一个是输入框：

      <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 '的值为“关闭”时，我希望禁用表单控件：' SundayOpen '。现在的问题是'SundayStatus'的值已经初始化为“关闭”。如果我将此代码放在输入#SundayOpen上：

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

它第一次不会禁用控件，但是当我将下拉列表的值更改为“已打开”==>“已关闭”时，它就起作用了。

帮帮我！

- Biswas Khayargoli

请尝试使用以下代码：timeform.controls['SundayStatus'].value === 'Closed' 如果这不起作用，请尝试提供一个能够重现问题的 StackBlitz 示例。 - user13258211

在使用响应式表单时，请不要在模板中使用[disabled]。避免混合使用响应式表单和模板表单。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Random · Accepted Answer

你必须监听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();
}