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

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

0 голосов
/ 09 мая 2018

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

Машинопись 

buildForm(): void {
 this.userForm = this.fb.group({
  'email': ['', [
    Validators.required,
    Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
  ]
  ],
  'password': ['', [
    Validators.required,
    Validators.minLength(6),
    Validators.maxLength(25)
   ]
   ],
 });
 this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));
}

onValueChanged(data?: any) {
 if (!this.userForm) { return; }
 const form = this.userForm;
 for (const field in this.formErrors) {
  // clear previous error message (if any)
  this.formErrors[field] = '';
  const control = form.get(field);
  if (control && control.invalid && control.dirty) {
    const messages = this.validationMessages[field];
    for (const key in control.errors) {
      this.formErrors[field] += messages[key] + ' ';
     }
   }
  }
}

Функция onValueChanged () изменяет этот объект 

formErrors = {
  'email': '',
  'password': ''
};

И этот объект имеет сообщения проверки. 

validationMessages = {
 'email': {
  'required': 'Email is required',
  'pattern': 'Email is invalid'
 },
'password': {
  'required': 'Password is required',
  'minlength': 'Debe tener 6 caracteres como mínimo',
  'maxlength': 'Password cannot be more than 40 characters long.',
 }
};

HTML 

      <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email" required>
          <mat-error *ngIf="formErrors.email" align="start" class="form__error">
            {{ formErrors.email }}
          </mat-error>
        </mat-form-field>     
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Password" type="password" formControlName="password" required>
          <mat-error *ngIf="formErrors.password" align="start" class="form__error">
            {{ formErrors.password }}
          </mat-error>
        </mat-form-field>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Поздний ответ, но я опубликую его там на случай, если он кому-нибудь может помочь.

С Angular 6+ вы можете настроить поведение проверки формы с помощью onChange атрибута опции FormControl, например ::10000 * 

'email': ['', {
    validators: [
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
    ],
    updateOn: 'change'
 }]

updateOn может быть:

change - подтвердить немедленно, при изменении

blur - проверка при выходе из поля

submit - подтвердить на форме отправить

Источники:
https://angular.io/api/forms/AbstractControlOptions
https://angular.io/guide/form-validation#note-on-performance

(Я только что ответил на аналогичный вопрос здесь: Проверка огня при фокусировке от входа в угловом направлении? )

0 голосов
/ 09 мая 2018

По умолчанию появляются ошибки поля формы, которые появляются при прикосновении к элементу управления или при отправке формы, когда элемент управления недействителен.Чтобы изменить это поведение, вы можете использовать пользовательский ErrorStateMatcher - см. Пример Angular Material Ввод с пользовательским ErrorStateMatcher .

...