0

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

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

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

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

4

1 回答 1

0

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

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

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

<button type="button" (click)="addPerson($event)">ADD NEW </button>
于 2019-11-27T18:19:49.017 回答