Как проверить поле в угловой реактивной форме?

1

Я пытаюсь проверить свою форму в угловом режиме с использованием реактивной формы. Несколько полей - пример card name в котором пользователь вводит только string

поэтому он пытается ввести что-либо другое, кроме строки. Мне нужно показать недопустимое сообщение. Я так пробовал

https://codesandbox.io/s/jzq6nn6zz9

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [(Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"))]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }

когда я запускаю свое application моя форма уже действительна почему? Изображение 174551 он должен действовать только тогда, когда пользователь enter string

  • 2
    Вместо того, чтобы ждать ответа (он будет долгим, поэтому не многие хотят тратить время на написание чего-то, что уже подробно описано в Angular Guide ), прочитайте angular.io/guide/reactive-forms
Теги:
angular

4 ответа

1
Лучший ответ

Удалите дополнительные скобки () в массиве Validators. Validators должны быть отправлены как массив. После добавления () они обрабатываются как один элемент, который дает ложные результаты.

this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+")] // see this line
      ],

Stackblitz

Поделиться
  • 0
    привет это правильно работать , но почему он является недействительным , когда я печатаю или при вводе a any charter .after завязывания второго персонажа это показать действительным
  • 0
    Из-за вашей проверки Validators.pattern("[a-zA-Z][a-zA-Z ]+") которой требуется минимум 2 символа
Показать ещё 6 комментариев
0

Просто добавьте Validators.minLength(1) чтобы он ввел хотя бы один символ и Validators.pattern("[a-zA-Z][a-zA-Z ]+") проверит, вводит ли он действительное имя

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"),Validators.minLength(1)]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }
Поделиться
0

Вы можете использовать проверку ошибок formGroup, чтобы убедиться, что она работает правильно. yourForm.get('cardname').hasError('required') Вы также можете проверить добавление дополнительного HTML-кода в свой HTML- yourForm.get('cardname').hasError('required') который будет отображаться, когда пользователь делает что-то неправильно в режиме реального времени. Здесь пример с проверкой, требуется ли элемент:

<div *ngIf="yourFormGrup.get('cardname').hasError('required')">Card name is required.</div>

Он будет виден только тогда, когда ваша группа форм содержит указанную ошибку. Вот вам дополнительное чтение, которое поможет вам.

Поделиться
0

Напишите 1 пользовательский валидатор для этой задачи. Я добавил 1 образец здесь, просто измените свое состояние в валидаторе.

import { AbstractControl } from '@angular/forms';

export function SameEmail(control: AbstractControl) {
    let email = window.localStorage.getItem("user");
    if (control.value == email) {
        return { validEmail : true };
    } else {
        return null;
    }
   
}


this.customForm = this.formBuilder.group({
        'email': new FormControl(this.customForm.email, [
          Validators.required,
          SameEmail
        ])
      });
<div *ngIf="form.email.invalid && (form.email.dirty || form.email.touched)" class="alert alert-danger">
              <div *ngIf="form.email.errors.required">
                Error 1
              </div>
              <div *ngIf="form.email.errors.validEmail">
                Error 2
              </div>
            </div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню