Angular Form验证提交按钮未正确禁用

Question

我有一个使用Angular Material表单字段进行错误处理的简单2输入表单。我在每个输入字段上都有一个FormControl。如果没有为这些字段输入任何值，则错误将正确显示。

但是，即使字段均为空，也永远不会禁用提交按钮。

有人可以看到问题所在吗？

这是我的HTML

    <form class="add-dialog-form" (ngSubmit)="onAddField()" #addField="ngForm">

      <mat-form-field>
        <input matInput placeholder="Enter name" [formControl]="name" required name="name">
        <mat-error *ngIf="name.invalid">{{getNameErrorMessage()}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput placeholder="Enter value" [formControl]="value" required name="value">
        <mat-error *ngIf="value.invalid">{{getValueErrorMessage()}}</mat-error>
      </mat-form-field>

      <div mat-dialog-actions class="dialog-button-align">
        <button mat-button (click)="onCancel()">Cancel</button>
        <button mat-button type="submit" [disabled]="!addField.form.valid">Add Field</button>
      </div>

    </form>

根据Angular Material的示例，这是我如何在组件中定义FormControl及其错误消息处理的方法：

    name = new FormControl('', [Validators.required]);
    value = new FormControl('', [Validators.required]);

    getNameErrorMessage() {
      return this.name.hasError('required') ? 'You must enter a value' : '';
    }

    getValueErrorMessage() {
      return this.value.hasError('required') ? 'You must enter a value' : '';
    }