Question

我正在通过Angular2交易.NET API（老实说...... 5）我使用数据注释属性实现服务器端模型验证。因此，API返回错误请求（404）并附带验证消息：

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

我的问题是如何在我的角度视图中显示这些消息。

我的角色服务：

  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>

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

我希望有所帮助。

Angular2显示.NET API验证消息

1 个答案: