Показать сообщение проверки для 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

Чтобы сделать это для каждого входа, как предложено, вам понадобится ваш 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

Answer 2

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

Answer 3

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

<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, а затем сохранить его в открытом свойстве.