Angular 反应式表单 - 在 FormGroup 中禁用 material 设计按钮

Question

我有一个包含 Angular material 设计组件的响应式表单。我想在初始化组件时禁用表单中的所有控件¹。

我曾尝试在构造函数中的 FormGroup 以及 ngOnInit() 中调用 disable()，但出于某种原因，表单中的按钮（使用 material 设计）仍然处于启用状态。

模板：

<form [formGroup]="emailForm">
  <mat-form-field>
    <input matInput type="email" formControlName="email" placeholder="Email" />
  </mat-form-field>
  <button formControlName="removeButton" mat-icon-button class="button-small" (click)="clearEmail()" matTooltip="Clear email address" matTooltipClass="tooltip-medium" [matTooltipShowDelay]="500" ngDefaultControl>
    <mat-icon aria-label="Clear">clear</mat-icon>
  </button>
</form>

组件：

export class EmailFormComponent implements OnInit {
  private emailForm: FormGroup;

  constructor(private formbBuilder: FormBuilder) {
    this.createReactiveForm();
  }

  ngOnInit() {
     this.emailForm.disable();
  }  

  createReactiveForm() {
    this.emailForm  = this.formbBuilder.group({
      email: ['', [Validators.email, Validators.maxLength(100)]],
      removeButton : ['']
    });

    this.emailForm.disable();
  }

  clearEmail() {
    this.emailForm.patchValue({email:''});
  }
}

如果我从按钮中删除 material 设计，它会在初始化期间被禁用。如果我从组件中的单击事件处理程序方法调用 this.emailform.disable()，表单中的按钮也会被禁用。

是初始化过程中按钮没有被禁用的错误还是我做错了什么？如何在初始化时禁用 UI 中的按钮？

（注：这是一个简化的例子，真正的应用在表单中有更多的输入字段）。

¹ 当我问这个问题时，我不熟悉 Angular 的 resolve guard，它可用于在导航到组件之前加载动态数据.

Answer 1

您不应该为按钮使用表单控件。只需禁用表单并使用禁用按钮，如：

<button [disabled]="emailForm.disabled" ...

Stackblitz

Angular 反应式表单 - 在 FormGroup 中禁用 material 设计按钮

Angular reactive form - Disable material design buttons in FormGroup

angular-material2

angular

angular-reactive-forms