Угловая Реактивная Форма Индивидуальная Валидация Поля - PullRequest
Новая
       13

Угловая Реактивная Форма Индивидуальная Валидация Поля

0 голосов
/ 21 декабря 2018

При проверке реактивной формы в Angular я хочу, чтобы сообщение об ошибке отображалось под недопустимым полем при вводе недопустимых данных. 

<form  (ngSubmit)=sendQuery() [formGroup]="form">
  <div *ngFor='let key of modelKeys'>
    {{key}}
    <input name="query" placeholder="Enter {{key}} Here" formControlName="{{key}}" />
    <div *ngIf="(!key.untouched) || !(key.pristine) && !key.valid">
        Enter valid {{key}} detail
    </div>
  </div>
  <button type="submit" [disabled]='!form.valid'>Submit</button>
</form>

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

Вывод

enter image description here

Среда: угловой CLI: 7.1.3, rxjs 6.3.3, машинопись 3.1.1

1 Ответ

0 голосов
/ 21 декабря 2018

Проблема с вашим кодом здесь: 

<div *ngIf="(!key.untouched) || !(key.pristine) && !key.valid">
  Enter valid {{key}} detail
</div>

key - это просто (строка?) Ключ ваших данных, и вы используете его как FormControl объект, который, очевидно, не 'т работа.Чтобы использовать такие свойства, как untouched, pristine и valid, вам необходимо обратиться к FormControl.

Здесь - это быстрый стек, который показывает, как вы можете решить эту проблему.

Также я думаю, что ваша проверка на самом деле не работает так, как она реализована в настоящее время. В стеке я реализовал только фиктивную проверку, которая проверяет длину строки, но демонстрирует, как она работает (только показывает ошибкусообщение для поля, которое на самом деле недопустимо, например, длина равна 0).

А что касается вашего вопроса, почему ваше сообщение об ошибке всегда отображается, то это потому, что условие (!key.untouched) || !(key.pristine) && !key.valid всегда будет иметь значение true, если keyстрока.'myKey'.untouched оценивается как undefined, что превращает его в !undefined, что становится истинным.

...