在AngularJS 1.3+表单中显示和隐藏服务器端错误

Question

我在最近的应用程序中使用Angular框架和Angular Material控件。我正在为以下问题寻找一个好的解决方案：

向用户显示带有名为form的输入字段的表单nickname。在用户选择昵称并提交表单后，服务器会检查昵称是否已被删除。在这种情况下，它会向Angular客户端返回一个错误。

要向用户显示相应的错误，代码会调用form.nickname.$setValidity('nicknameTaken', true)。新的ngMessages模块用于向用户显示错误。进一步form.$isInvalid用于禁用表单控件以防止用户重新提交无效的昵称。

我的问题现在如下：我想在用户再次开始编辑表单字段时自动删除错误nicknameTaken。有什么好办法呢？当涉及到这种服务器端验证错误时，是否有预定义的路由？ （请注意，我不是要求进行异步验证，因为我只想在实际提交表单时联系我的服务器。）

Answer 1

我会写一个普通的验证器指令。像

这样的东西

<input blacklist="takenNickNames" .../>

该指令只是向输入添加验证器，如果模型值包含在给定的takenNickNames数组中，则此验证器将使输入无效（如果不存在则有效）。

takenNickNames数组最初为空。提交表单并返回错误后，控制器会将无效的昵称添加到数组中。

因此，每次用户输入内容时，都会触发验证器，并根据存储在数组中的昵称设置字段是否有效。

这是working example。