Angular2 отображает сообщения проверки правильности API .NET

Question

Я выполняю транзакции .NET API через Angular2 (честно .. 5) Я реализую проверку на стороне сервера, используя атрибуты аннотаций данных.Таким образом, API возвращает неверный запрос (404) с вложенными сообщениями проверки:

if (!ModelState.IsValid)
                return this.BadRequest(ModelState); 

Моя проблема связана с отображением этих сообщений в моем угловом представлении.

Мой сервис Angular:

  submitForm(formObj: FormDto) {
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json; charset=utf-8');

    return this.http.post("/api/Forms", JSON.stringify(formObj), { headers })
          .map((res: Response) => console.log(res));
         //need a .catch here obviously ??????
      }

и способ, которым я вызываю службу из самого компонента:

  submitForm() {
    this.formService.submitForm(this.formObj)
      .subscribe(res => { console.log(res);

          //update this bit to display error messages ?????
                      });
   }

Опять моя проблема в том, какдля правильного отображения возвращенных сообщений об ошибках проверки, поступающих из .NET API.

Answer 1

Давайте начнем с того факта, что modelState идет как объект (пары ключ-значение).Таким образом, вы можете получить доступ к объекту в поле зрения по определенному ключу.Вы можете иметь переменную в своем компоненте и хранить в ней объект modelState.

В точку ....

Я бы вообще не касался службы Angular, но так, как выподпишитесь на него, чтобы отделить успешный и неудачный обратный вызов:

 submitForm() {
    this.formService.submitForm(this.formObj)
            .subscribe((data) => //do what ever on success,
                        (err) => { this.errors= err.error; });
   }

После этого вы сможете увидеть свои сообщения об ошибках в представлении.Что-то вроде:

<span class="error-message">{{errors['EmailAddress']}}</span>

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

Надеюсь, это помогло.