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

【问题标题】：mat-form-field outline is triggering validation border color change while conditions still falsemat-form-field 轮廓正在触发验证边框颜色更改，而条件仍然为假
【发布时间】：2020-03-18 20:18:14
【问题描述】：

我有以下脚本来处理验证消息：

<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({})
      ])
  })
}

button方法调用一个action，使用@Effect打开一个modal，如下：

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

我遇到的问题是，当我在“标题”仍然为空的情况下单击“添加人员”按钮时，标题的 mat-form-field 轮廓变为红色。

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

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

【问题讨论】：

您是否使用<button> 来进行提交？你可以试试<input type="button">。我猜你是错误地触发了提交，然后验证了maxlength=61。
formDTO.get('name').touchedtruthy 在这种情况下也是如此吗？
克里斯；我确实有一个
AJT82: formDTO.get('name').touched 为 false 且未触发 mat-error。仅触发 mat-form-field 轮廓。
我认为问题在于对话框打开时表单失去焦点。但我不知道如何解决。

标签： angular outline reactive-forms mat-form-field mat-error

【解决方案1】：

结果很简单。调用对话框的按钮：

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

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

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

【讨论】：