Контур mat-form-field вызывает изменение цвета границы валидации, в то время как условия по-прежнему ложны

Question

У меня есть следующий сценарий для обработки сообщения проверки:

<mat-form-field appearance="outline" floatLabel="never"> 
  <input maxlength="61" #titleInput placeholder="add title"
         matInput id="title" formControlName="name" autocomplete="off"> 
</mat-form-field>
<mat-error  *ngIf="formDTO.get('name').touched && formDTO.get('name').invalid"> 
  <mat-error *ngIf="!!formDTO.get('name').errors?.required">title cannot be blank test</mat-error>
  <mat-error *ngIf="!!formDTO.get('name').errors?.maxlength">title length exceed 60 characters</mat-error>
</mat-error>

В том же сценарии у меня есть кнопка, которая вызывает другой компонент, модальное окно, использующее опережающий ввод, как показано ниже:

<button (click)="addPerson($event)">ADD NEW </button>

Сама проверка находится в коде.ts следующим образом:

ngOnInit() {
    this.formDTO = this.fb.group({
      name: ['', [Validators.required, Validators.maxLength(60)]],
      description: '',
      dueDate: new Date(Date.now()),
      people: this.fb.array([
        this.fb.group({})
      ])
  })
}

Метод кнопки вызывает действие, которое открывает модальное окно с помощью @Effect, и оно выглядит следующим образом:

addPerson(event: MouseEvent) {
    this.store.dispatch(new fromWorkspace.ShowAddPerson());
}

Проблема, с которой я столкнулся, заключается в том, что когда я нажимаю кнопку "добавить человека", когда "заголовок" все еще пуст, контур поля формы-мат для заголовка становится красным.

Он не возвращает сообщение об ошибке, что является ожидаемым поведением, но схема также должна оставаться прежней.

Это ошибка для mat-form-field или мне что-то не хватает?

Answer 1

Это оказалось довольно просто. Кнопка, которая вызывала диалог:

<button (click)="addPerson($event)">ADD NEW </button>

необходимо явно указать type="button", потому что 'button' по умолчанию имеет тип 'submit', и это вызвало 'недействительный'. В итоге это выглядело так:

<button type="button" (click)="addPerson($event)">ADD NEW </button>