Угловая форма не показывает ошибку при инициализации с помощью ng-zorro

У меня есть угловое приложение с реактивными формами. Я использую ng-zorro в качестве UI-фреймворка. Был случай, когда клиент мог открыть форму, которая стала недействительной во время его работы в приложении.

Проблема в том, что angular помечает форму как недействительную, но сообщения об ошибках не отображаются от ng-zorro до тех пор, пока не коснется элемент управления формой.

function validateEmail(c: FormControl) {
  const URL_REGEX = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;

  return URL_REGEX.test(c.value) ? null : {
    validateEmail: true
  };
}

      <nz-form-item>
        <nz-form-label
          nzXXl="3"
          nzXl="4"
          nzLg="6"
          nzMd="7"
          nzSm="10"
          nzXs="24"
          nzFor="videoLink"
          nzRequired>
          Video Link
        </nz-form-label>
        <nz-form-control
          nzXXl="21"
          nzXl="20"
          nzLg="18"
          nzMd="17"
          nzSm="14"
          nzXs="24"
          nzHasFeedback
          [nzErrorTip]="videoErrorTpl"
        >
          <input nz-input formControlName="videoLink" maxlength="150"/>
          <ng-template #videoErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
               required
              </ng-container>
              <ng-container *ngIf="control.hasError('validateEmail')">
                Please enter a valid URL
              </ng-container>
            </ng-template>
        </nz-form-control>
      </nz-form-item>

angular angular-reactive-forms ng-zorro-antd angular6
person Yauheni Pozdnyakov    schedule 11.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я правильно понял проблему, то корень ее в том, что все поля помечены как нетронутые. Если вам нужно отображать ошибки сразу после запуска компонента формы, попробуйте установить статус для всех полей на dirty. Например:

ngOnInit(): void {
  for (const key in this.validateForm.controls) {
    this.validateForm.controls[key].markAsDirty();
    this.validateForm.controls[key].updateValueAndValidity();
  }
}

где validateForm — модель формы

person Vitalii Malynka    schedule 30.11.2020