角反应形式-禁用FormGroup中的材料设计按钮

Question

我有一个包含Angular材质设计组件的反应形式。 我想在初始化组件¹时禁用窗体中的所有控件。

我试图在构造函数以及ngOnInit（）中的FormGroup上调用disable（），但是由于某些原因，表单中的按钮（使用材质设计）保持启用状态。

Stackblitz

模板：

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

如果我从按钮上删除了材料设计，它将在初始化期间被禁用。 如果我从组件中的单击eventHandler方法调用this.emailform.disable() ，则表单中的按钮也会被禁用。

是在初始化期间未禁用按钮的错误还是我做错了什么？ 初始化时如何在用户界面中禁用按钮？

（注意：这是一个简化的示例。实际的应用程序在表单中具有更多输入字段）。

¹当我问这个问题时，我不熟悉Angular的解决方案保护器 ，该保护器可用于在导航到组件之前加载动态数据。

Answer 1

您不应该将表单控件用于按钮。 只需禁用表单并使用按钮禁用即可：

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

Stackblitz