Реактивные формы условной пользовательской проверки - PullRequest
Новая
       49

Реактивные формы условной пользовательской проверки

1 голос
/ 17 февраля 2020

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

Есть ли способ сделать это, создав интерфейс: 

interface error {
     condition: boolean,
     message: string
}

используя ngFor и перебирая набор ошибок, проверяя, выполнено ли условие?

У меня проблема в том, что условие связано с функцией (): логическим, и ngFor не отображает себя снова, когда пользователь вводит неверные данные, поскольку в коллекции нет изменений, кроме значения, которое будет возвращать функция условия.

1 Ответ

2 голосов
/ 17 февраля 2020

при создании customValidator вы возвращаете объект в случае ошибки. Этот объект может отличаться в зависимости от ваших требований. 

  customError() {
    return (control: AbstractControl) => {
      if (isNaN(control.value)) return { error: "it's not a number" };
      if (+control.value > 100) return { error: "it's greater than 100" };
      return null;
    };
  }

   <div *ngIf="myform.get('control').errors">
         {{myform.get('control').errors.error}}
   </div>

Вы также можете вернуть объект со свойством diferents, например errorNaN и errorGt 

  customError() {
    return (control: AbstractControl) => {
      if (isNaN(control.value)) return { errorNaN : "it's not a number" };
      if (+control.value > 100) return { errorGt: "it's greater than 100" };
      return null;
    };
  }

   <div *ngIf="myform.get('control').errors?.errorNaN">
      It's not a number
   </div>
   <div *ngIf="myform.get('control').errors?.errorGt">
      it's greater than 100
   </div>

простой пример stackblitz

...