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());
}

我遇到的问题是，当我在 "title" 仍然为空时单击 "add person" 按钮时，标题的 mat-form-field 轮廓变为红色。

它不会 return 错误消息，这是预期的行为，但大纲也应保持不变。

这是 mat-form-field 的错误还是我遗漏了什么？

Answer 1

事实证明这很简单。调用对话框的按钮：

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

需要明确说明 type="button" 因为 'button' 默认是 'submit' 类型并且触发了 'invalid'。所以最后看起来像这样：

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

mat-form-field 大纲正在触发验证边框颜色更改，而条件仍然为假

mat-form-field outline is triggering validation border color change while conditions still false

outline

angular

angular-reactive-forms

mat-form-field

mat-error