Как показать ошибку ошибки, когда текстовое поле загрязнено и находится в фокусе?

Question

Я хочу показать mat-error сразу после того, как пользователь начал что-то писать на элементе ввода.Вот мой код:

<mat-form-field appearance="outline">
    <mat-label>Password</mat-label>
    <input matInput type="password" placeholder="Password" required [(ngModel)]='model.password' #password='ngModel' name='Password' [minlength]='requiredLength' [pattern]="passwordPattern">
    <mat-error *ngIf="password.errors?.pattern">
        Password must be 8 characters long, one numeric, one special character....
    </mat-error>
</mat-form-field>

Я хочу показать сообщение об ошибке, как только пользователь начал вводить данные.В настоящее время ошибка отображается в текстовом поле потерянного фокуса.Я также попытался следующим образом:

<mat-error *ngIf="password.dirty">
    <mat-error *ngIf="password.errors?.pattern">
        Password must be 8 characters long, one numeric, one special character....
    </mat-error>
</mat-error>

Но это также производит то же поведение, что и раньше.Один из возможных способов - использовать подсказку.Но я не хочу показывать это как подсказку согласно требованию, мне нужно показать это как ошибку.

Кстати, я использую ng-форму.

Можно липолучить указанное поведение с помощью mat-error на ng-form?или мне нужно настроить css для mat-hint, чтобы оно выглядело как сообщение об ошибке?

Answer 1

вы можете сделать это следующим образом -

<mat-form-field appearance="outline">
  <mat-label>Password</mat-label>
  <input matInput 
        type="password"
        placeholder="Password"
        name='Password'
        [ngModel]='model.password'
        (ngModelChange)="onChange($event, password)"
        #password='ngModel'
        [minlength]='requiredLength'
        [pattern]="passwordPattern"
        required>
  <mat-error *ngIf="password.errors?.pattern"">
      Password must be 8 characters long, one numeric, one special character....
  </mat-error>
</mat-form-field>

и в вашем component.ts добавить метод onChange () -

onChange($event, password){
    this.model.password = $event;
    if(!password.control.touched){
      password.control.markAsTouched();
    }
}

Answer 2

Это будет применять новый сопоставитель ко всему вашему приложению:

dirty-error-state.matcher.ts

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

export class DirtyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return !!(control && control.invalid && (control.dirty));
    }
}

app.module.ts

import { DirtyErrorStateMatcher } from 'your-path-here';
import { ErrorStateMatcher } from '@angular/material/core';

@NgModule({
...
  providers: [{
    provide: ErrorStateMatcher,
    useClass: DirtyErrorStateMatcher
  }]
})

Answer 3

Если вы хотите запускать проверку при каждом нажатии клавиши пользователем, вы должны использовать небольшой обходной путь.Я предлагаю вам использовать FormControl, который затем позволит вам установить валидатор непосредственно на этом элементе управления, а также прослушать изменения, испускаемые valueChanges, чтобы пометить FormControl как прикосновенный для запуска проверки (возможно, есть лучшийРешение этой проблемы?).

См. stackblitz .Валидация выполняется с помощью Validators.pattern (минимум 8 символов, как минимум одна буква, один номер и один специальный символ), поэтому больше не требуется обязательный или минимальный валидатор длины.