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

Question

I have the following script to handle validation message:

<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>

On the same script I have a button that call another component, a modal that uses typeahead, as follows:

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

The validation itself is in the .ts code as follow:

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

The button method call an action that opens a modal using @Effect and it is as follows:

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

The problem I'm having is that when I click a "add person" button while "title" still empty, the mat-form-field outline for the title turns red.

It does not return the error message, which is the expected behavior, but the outline should remain the same as well.

Is this a bug for mat-form-field or Am I missing something?

Answer 1

It turned out to be pretty simple. The button that was calling the Dialog:

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

need to explicity say type="button" because 'button' by default is of 'submit' type and that was triggering the 'invalid'. So in the end it looked like this:

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