Проверка угловых форм работает только после смены фокуса - PullRequest
Новая
       71

Проверка угловых форм работает только после смены фокуса

0 голосов
/ 10 ноября 2019

У меня есть угловая форма, на которой я хочу провести некоторую проверку. Теперь, когда текстовая область загружается в первый раз, и я что-то печатаю, нарушая валидацию, она не показывает ошибку.

Когда я изменяю фокус на какой-то другой элемент, появляется ошибка.

Но после этого всякий раз, когда имеет место нарушение, ошибка отображается немедленно, без необходимости изменения фокуса. 

<form [formGroup]="AddEditform" novalidate autocomplete="off">
    <mat-form-field appearance="outline">
        <textarea matInput name="user" formControlName="users" id="user">
        </textarea>
        <mat-error
            *ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
        >
            Exceeded maximum length
        </mat-error>
    </<mat-form-field>
</form>


AddEditform: FormGroup;

constructor(
  private fb: FormBuilder,
) { }

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  });
}

Почему происходит такое поведение? Почему в первый раз проверка не происходит без необходимости изменения фокуса?

Ответы [ 2 ]

0 голосов
/ 10 ноября 2019

Решение того же самого найдено в StackBlitz Link

Ошибка в вашем <mat-error>, не запускается, когда происходит проверка изменения входного значения. для решения этой проблемы вы должны использовать пользовательский ErrorStateMatcher в своем файле class.ts и указать в шаблоне, что вам нужен пользовательский ErrorStateMatcher.

component.html 

<form  novalidate autocomplete="off">
     <mat-form-field appearance="outline">
         <textarea matInput #inputValue name="user" 
              [formControl]="users" id="user" [errorStateMatcher]="matcher" >
         </textarea>
       <mat-error>
         Exceeded maximum length
       </mat-error>
    </mat-form-field>
</form>

component.ts 

export class AppComponent  {
    name = 'Angular';
    AddEditform: FormGroup;
    users = new FormControl('', [Validators.maxLength(5)]);
    matcher = new MyErrorStateMatcher();

    ngOnInit(){ }
}

export class MyErrorStateMatcher implements ErrorStateMatcher {
       isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
            const isSubmitted = form && form.submitted;
            return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
        }
}
0 голосов
/ 10 ноября 2019

Вы можете добавить атрибут updateOn в группу форм : 

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  },
 {updateOn: 'change'} 
);
}

Это должно запускать проверки при каждом изменении значения модели.

...