Добавьте ошибки на стороне сервера, чтобы сформировать в Angular

Question

У меня есть следующий угловой компонент 7:

export class SendMessageComponent implements OnInit { 

  message: FormGroup;

  constructor(private formBuilder: FormBuilder, private messageService: MessageService) { }

  ngOnInit() {

    this.message = this.formBuilder.group({ 
      name: ['', Validators.required], 
      email: [''], 
      message: ['']
    });

  }

  onSubmit() {

    if (this.message.valid) {

      this.messageService.send(message).subscribe(

        (successResponse: SuccessResponse>) => { },

        (errorResponse) => {

          if (errorResponse.status === 400) {

            for (var error in errorResponse.error.errors) {

            }

          }            

        },

      );

    }

  }

}

При возникновении ошибок сервер возвращает errorResponse.error.errors, что-то вроде:

[
  { name: "Email", info: "Email is unavailable" }
]

Я хотел бы добавитьошибки на стороне сервера в моей форме.

Как я могу это сделать?

Answer 1

Вы можете использовать метод setErrors() в элементе управления формы, в который вы хотите добавить ошибку.

Например, для своего поля электронной почты:

this.message.get('email').setErrors({ error: 'A server side error' });

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

Для вашего варианта использования вы можете сделать это в цикле, если ваш сервер возвращает тот же Name, что и ваши FormGroup элементы управления.

for (let error in errorResponse.error.errors) {
   this.message.get(error.name.toLowerCase()).setErrors({ error: error.info });
}

Дополнительная информация: https://angular.io/api/forms/AbstractControl#setErrors

Answer 2

Вы можете вызвать метод SetErrors () FormControl для достижения этой цели.

https://angular.io/api/forms/AbstractControl#setErrors