Angular 2：FormGroup：如何显示自定义错误消息

Question

我正在使用Angular4构建前端。 如果用户提交了错误的表单，则应显示错误消息。

目前，我的错误处理如下所示：

// This code is run when a response from the server is received
if ('error' in server_response) {
    for (let key in server_response.error {
      this.form.controls[key].setErrors({'error': true});
      let error_message_from_server = server_response.error[key];
    }
}

我如何在HTML中显示错误：

<span class="error" *ngIf="field.invalid">Error: {{field.errors.error}} <br></span>

此刻的field.invalid当收到一个错误变成正确的，但在field.errors.error一个空字符串。

问题：如何设置field.errors.error消息？ 此消息应该是error_message_from_server的字符串

请注意，通过在HTML代码中使用if语句来解决此问题不是一种选择。 潜在错误的数量是数百。

Answer 1

this.form.controls[key].setErrors({'error': true}); //键是错误，值是布尔值而不是字符串

尝试设置字符串类型值

for (let key in server_response.error {
  this.form.controls[key].setErrors({'error': erver_response.error[key]});
//Calling `setErrors` will also update the validity of the parent control.
}

Answer 2

要使错误字符串在html级别上可用，您必须在组件级别声明它：

error_message_from_server: string;

然后，根据您对服务器的响应，将消息设置为该字符串：

// This code is run when a response from the server is received
if ('error' in server_response) {
    for (let key in server_response.error {
      this.form.controls[key].setErrors({'error': true});
      error_message_from_server = server_response.error[key];
    }
}

然后将字符串绑定到元素中：

<span class="error" *ngIf="field.invalid">Error: {{error_message_from_server}} <br></span>