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

Im使用Angular4构建前端。如果用户提交错误表单，则应显示错误消息。Angular 2：FormGroup：如何显示自定义错误消息

此刻，我的错误处理是这样的：

// 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语句解决此问题不是一种选择。潜在的错误数量在几百。

来源

2017-08-10 Vingtoft

你想在服务器响应后显示消息或在表单提交之前？你需要在文本框附近显示什么东西或者任何提醒都很好？ –

抱歉不清楚。我更新了我的问题！应该在服务器响应后显示错误。从服务器接收错误消息。 – Vingtoft

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. 
}

来源

2017-08-10 17:38:25

对于错误字符串可用在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>

来源

2017-08-10 14:17:08 BogdanC

我有100多个输入字段，他们都可以从服务器收到潜在的错误消息。创建100多个公共字符串听起来像是一个非常糟糕的解决方案，特别是当Angular已经提供了一个'field.errors.error'时。我需要调查这是否是唯一的解决方案。感谢您的输入。 – Vingtoft

没问题，我不知道你有100多个输入。 – BogdanC

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

回答

相关问题