角度验证可显示提交时的所有错误

Question

我有一个简单的示例表单，该表单将验证必填名称和至少3个字母。 在使字段变脏时很好地显示错误：

但是，当用户按下“提交”按钮时，我们的设计师希望所有为空且“ 必需 ”也变为“ 红色 ”的字段。 现在，除非他们触摸并使字段“变脏”，否则验证不会将字段变为红色。

当然，只有在他们提交表单或使字段变脏之后，该字段才应该以红色开头。

jQueryValidate.org做到了这一点，所以这也是他们在Angular中想要的。

Answer 1

我遇到了同样的要求，并通过在我的控制器的作用域上添加一个布尔值来表示表单是否已提交， formSubmitted

在表单提交方法中，我将formSubmitted的值设置为true

然后，我将在需要的地方动态添加一个类：

<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}">
    <input name="field" required/>
</div>

Answer 2

您还可以将此https://github.com/AngularAgility/AngularAgility用于Toster中的所有控件和错误摘要。 验证并专注于引起验证的领域的最佳方法。