Блог

У меня есть ввод углового материала с formControl и ошибкой пользовательского мата. Когда я реализую ошибку матирования, она выглядит так, как Invalid даже если она не сфокусирована. Что в этом плохого?

Template.html

 <form class="myform">
  <mat-form-field class="full-width">
    <mat-label>Project</mat-label>
      <input matInput
        [formControl]="projectNameControl"
        [errorStateMatcher]="matcher"
        autocomplete="off" type="text"
        placeholder="Type Project Name" >
        <mat-error *ngIf="projectNameControl.hasError('required')">
          Project name is <strong>required</strong>
        </mat-error>
     </mat-form-field>
</form>
  

Component.ts

 
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form amp;amp; form.submitted;
        return !!(control amp;amp; control.invalid amp;amp; (control.dirty || control.touched || isSubmitted));}}

  @Component({
    selector: 'app-upload-data',
    templateUrl: './upload-data.component.html',
    styleUrls: ['./upload-data.component.scss']
  })

  export class UploadDataComponent implements OnInit {
    /*Rest Code here*/
    projectNameControl = new FormControl('', [Validators.required]);    
    matcher = new MyErrorStateMatcher();
  }
}
  

app.module.ts

 import {ErrorStateMatcher, ShowOnDirtyErrorStateMatcher} from '@angular/material/core';

providers: [{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}]

  

Прежде всего, вы создали пользовательский сопоставитель состояния ошибки, вы привязали ввод, и все же вы переключили один ErrorStateMatcher по умолчанию на ShowOnDirtyErrorStateMatcher в app.module.ts.

Это предполагаемая идея? Не могли бы вы, пожалуйста, расширить свои мысли?

Во-вторых, ваш ввод выглядит странно. Похоже, что в нем есть ошибка (потому что вы сфокусировали курсор, но заполнитель не перешел в метку. Вы проверили консоль? Мне кажется, что что-то не было установлено должным образом, или, может быть, вы забыли импортировать MatInputModule?