Почему моя форма проверяет все значения по умолчанию (нетронутое поле), как только страница загружена?

Question

У нас есть вопрос об использовании Validators.required или его понимании для нашей формы.

Мы хотим, чтобы вводимый текст был обязательным (Validators.required).Его значение по умолчанию пусто ('').Пользователь должен вставить в него текст.

Проблема в том, что что-то играет Validators.required, когда мы приходим на страницу.Другими словами, входной текст уже выделен красным, помечен как недействительный, как только страница обновляется.

Например, то, что мы пытаемся сделать, здесь https://www.primefaces.org/primeng/#/validation,, чтобы сделать поле 'Имя *:' недопустимым, мы должны сфокусировать поле, напечатать какой-нибудь материал, стереть всеи потеря фокуса.

Мы используем Angular 7 и PrimeNG.Если мы скопируем / пропустим исходный код из PrimeNG, у нас возникнет та же проблема.Но если мы заменим, например, Validators.required Validators.pattern ('\ d {4}'), все будет работать нормально: пользователь должен сначала поместить некоторые данные во входные данные, и только после этого активируется Validators.становятся недействительными сразу после инициализации из this.fb.group (...).

 ngOnInit(): void {
    this.myform = this.fb.group({
        'minBreak':  new FormControl('', Validators.required) 
    });
}


<div style="display: flex; width: 28em;">
    <span style="margin-right: 1em;">
            Min break
    </span>
    <input type="text" pInputText formControlName="minBreak" />
</div>

Проблема Как только this.myform = this.fb.group({ 'minBreak': new FormControl('', Validators.required) }); завершена, форма переходит в статус= НЕВЕРНО.Мы ожидаем, что он будет действительным.

Вопрос Почему наша форма становится недействительной после ее инициализации?Это нормально для запуска Validators по умолчанию?Если так, то почему на примере здесь https://www.primefaces.org/primeng/#/validation это не так?

Stackblitz https://stackblitz.com/edit/angular-pnyiy3 в консоли, мы можем видеть, что статус формыНЕВЕРНО.

Спасибо за вашу помощь:)

NB Для тех, кто использует JHipster, они помещают

.ng-invalid:not(form) {border-left: 5px solid red;} 

в global.scss,После удаления все работает нормально ...

Answer 1

С angular doc для валидатора требуется непустое значение.

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

Вы можете найти рабочее воспроизведение здесь: https://stackblitz.com/edit/angular-a3vjbk

Answer 2

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

В вашем примере кода вы просто отображаете сообщение об ошибке в HTML. Вам необходимо проверить, является ли поле действительным, а также является ли форма «грязной». Вы можете сделать это с помощью директивы * ngIf и поместить ее в тэг span.

Проверьте в файле validationdemo.html пример веб-сайта , который вы упомянули в своем вопросе:

 <p-message severity="error" 
            [text]="Error"
    *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty">

userform.controls ['password']. Valid проверяет, действителен ли ваш полевой пароль userform.controls ['password']. Dirty проверяет, является ли ваше поле "грязным". Ваше поле становится грязным, если вы нажали, изменили значение или нажали любую клавишу во время фокусировки поля.