Angular.js：提交时将表单字段设置为“脏”答案

【问题标题】：Angular.js: Set form fields "dirty" upon submissionAngular.js：提交时将表单字段设置为“脏”
【发布时间】：2014-10-09 13:41:45
【问题描述】：

如何使表单输入在提交表单时变脏？

这是需要的，以便带有 $error 的输入字段可以是

例子：

    name: <input    type="text"
                    ng-model="user.name" 
                    ng-model-options="{ updateOn: 'blur' }"
                    name="uName"
                    required /><br/>

提交表单后，我希望此字段（如果留空）使用“无效和脏”样式呈现：

    .css-form input.ng-invalid.ng-dirty {

        background-color: #FA787E;
    }

【问题讨论】：

如果该字段是必填项，则不应允许提交。如果表单不脏或有错误，您应该禁用提交按钮。
嗨@m.e.conroy，这不会让用户感到困惑，因为他们有一个禁用的提交按钮并且无法突出显示错误的字段？
当然可以。您应该突出显示错误的字段。如果您使用的是 Angular 1.3，请查看 ngMessages，它是一个单独的模块，您需要包含它才能使用它。或者，我在我的答案中添加了一些代码，以展示您如何以 old 方式进行操作。
提交时这样做的问题是您必须停止提交事件的继续，如果您在表单有效之前禁用提交按钮，您不必担心这一点。
@m.e.conroy，感谢您在回答中添加详细信息。它帮助我解决了我的需求:-)

标签： angularjs forms validation

【解决方案1】：

禁用提交按钮，直到表单变脏并且表单项有效。

<button type="submit" class="btn btn-primary" ng-disabled="myFrmName.$invalid || !myFrmName.$dirty">Submit Form</button>

使用ng-disabled 将在表单处于$invalid 或尚未触摸表单（不是$dirty）时禁用表单提交按钮。

编辑

我通常会这样做以在必填字段旁边显示错误：

<input type="text" name="myField" required ng-class="{true : 'has-error'}[hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)]>
<span ng-if="hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)">Required!</span>

然后在你的控制器中：

$scope.hasError = function(e,d){ // e = $error, d = $dirty
    if(angular.isDefined(e))
        return e && d;

    return false;
} // end hasError

ngMessages 示例（Angular 1.3）

<input type="text" name="myField ng-model="fields.myField" ng-class="{true : 'has-error'}[hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)] required>
<ng-messages for="myFrmName.myField.$error" ng-if="myFrmName.myField.$dirty">
    <ng-message when="required" class="text-danger">The field is required!</ng-message>
</ng-messages>

ngMessages 的优点在于，您只需为字段的每种验证类型添加更多 <ng-message> 标记，然后适当地更改 when 属性即可。

<ng-message when="minlength">Your entry is too short.</ng-message>

Angular 将根据 when 是否在字段的 $error 对象中显示正确的消息。

【讨论】：

嗯，确实。使用 $dirty 验证将允许显示一条消息以邀请用户验证字段。好！
我只是想补充一下，你如何在违规字段旁边显示一条消息，它与 AngularJS 1.2 到 1.3 有点不同，因为 1.3 中有一个名为 ngMessages 的新模块，它是一个巨大的在这件事上提供帮助。

【解决方案2】：

如果表单已提交且为空，您可以使用表单的$submitted 标志突出显示该字段。

<input type="text"
       ng-model="user.name" 
       ng-model-options="{ updateOn: 'blur' }"
       name="uName"
       ng-class={'has-error': yourFormName.$submitted && !yourFormName.uName.$valid}
       required />

或者我猜只是在你的控制器中将表单的脏标志设置为 true 可能会做同样的工作。但我相信这隐含地改变了 DOM，因为它向表单添加了一个类，这在 Angular 中不是一个好的做法。

$scope.yourForm.$dirty = true;

【讨论】：

有趣的 ng-class 指令。感谢您的帮助！
cubbuk 是对的，不要强迫你的表单是$dirty

【解决方案3】：

如果您想以编程方式执行此操作，可以使用一个名为“$setDirty()”的方法。

https://docs.angularjs.org/api/ng/type/form.FormController

【讨论】：