Angular2显示.NET API验证消息

Question

我正在通过Angular2进行.NET API事务处理（诚实地.. 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>

将上面的行放在需要的每个输入上，但更改键以查看正确的消息。 我已经做了一个快速演示，正在工作。

希望对您有所帮助。