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>

在同一脚本上，我有一个调用另一个组件的按钮，一个使用typeahead的模式，如下所示：

<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轮廓变为红色。

它不返回错误消息，这是预期的行为，但轮廓也应保持不变。

这是mat-form-field的错误，还是我缺少什么？

Answer 1