Кнопка отправки проверки угловых форм неправильно отключена

Question

У меня есть простая форма ввода 2, используя поле формы Angular Material с обработкой ошибок. У меня есть 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>

Вот как я определил FormControl и обработку сообщения об ошибке для него в компоненте, как в примере с Angular Material:

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