Показать сообщение проверки для formControlName в Angular

Question

У меня есть следующая форма Angular SignUp:

<form [formGroup]="signUp" (ngSubmit)="onSubmit()">
  <input id="email" type="text" formControlName="email" placeholder="Email">
  <input id="email" type="password" formControlName="password" placeholder="Password">
  <button type="submit" [disabled]="!enquiry.valid">Sign Up</button>
</form>

В коде компонента я передаю значения в API.

Если что-то не так, API возвращает список ошибокчто я нажимаю на ошибки формы.

Как отобразить сообщение об ошибке для каждого ввода?

Мне не нужно устанавливать какое-либо сообщение, поскольку API уже возвращает правильное сообщение.

Answer 1

Разметка может выглядеть примерно так:

<form [formGroup]="signUp" (ngSubmit)="onSubmit()">
  <input id="email" type="text" formControlName="email" placeholder="Email">
  <span id="emailError" *ngIf="apiErrors.emailError">{{apiErrors.emailError}}</span>
  <input id="email" type="password" formControlName="password" placeholder="Password">
  <span id="pwdError" *ngIf="apiErrors.pwdError">{{apiErrors.pwdError}}</span>
  <button type="submit" [disabled]="!enquiry.valid">Sign Up</button>
</form>

После форматирования ответа API, чтобы вернуть необходимый JSON, а затем сохранить его в открытом свойстве.

Answer 2

Вы можете использовать ошибки проверки для реактивных форм (https://angular.io/guide/form-validation). Я думаю, вы можете настроить функцию проверки пользовательских форм (https://angular.io/guide/form-validation#custom-validators). Надеюсь, это поможет.

Answer 3

Чтобы сделать это для каждого входа, как предложено, вам понадобится ваш API для возврата ошибок с соответствующим именем FormControl, например;

[
   { name: 'email', errorMessage: 'Email already exists' },
   { name: 'password', errorMessage: 'Password is not strong enough' }
]

После того, как вы вернули этоВы можете перебрать массив ошибок и применить к каждому элементу управления формы с помощью setErrors(), например,

for (let error in errorResponse) {
    this.signUp.get(error.name).setErrors({ error: error.errorMessage });
}

. В этот момент вам просто нужно показать сообщение об ошибке для каждого ввода.

<p *ngIf="signUp.get('email').error">{{signUp.get('email')?.errors?.error}}</p>

Пример Stackblitz: https://stackblitz.com/edit/angular-pqhdul