代码之家 › 专栏 › 技术社区 › Vingtoft

角度2:FormGroup:如何显示自定义错误消息

angular forms

Vingtoft · 技术社区 · 7 年前

我正在使用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 当收到错误时变为true,但 field.errors.error 在空字符串中。

问题: 如何设置 field.errors.error字段错误 消息此消息应为中的字符串 error_message_from_server

2 回复 | 直到 7 年前

Jorawar Singh 7 年前

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

BogdanC 7 年前

为了使错误字符串在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>

推荐文章

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

Maddison · 如果用户选择18岁以下,则需要表单重定向用户

2 年前

Maddison · 拆分用户全名并将名字传递给下一个表单pae

2 年前

Santiago Cuartas Rmrz · 使用Javascript根据密码输入长度启用/禁用按钮

2 年前

BABO SAMMO NG · 如何延迟javascript警报直到操作完成

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

Shikhor Khan · 如何从下面的代码中删除提交后的表单值?

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

inyourface3445 · 更改表单中的值会导致延迟

2 年前

Filippo · 无法输入:焦点覆盖默认设置

2 年前