Question

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

这是必需的，因此带有$ error的输入字段可以是

示例：

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

提交表单时，我想要使用＆＃34;无效＆amp;脏＆＃34;式：

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

        background-color: #FA787E;
    }

Answer 1

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

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

使用ng-disabled会在表单 $ invalid 时禁用表单提交按钮，或者表单尚未触及（不是 $ dirty ）。< / p>

修改

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

<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将根据何时是否在该字段的 $ error 对象中显示正确的消息。

Answer 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，因为它增加了一个形成的类，这在角度上不是一个好习惯。

$ scope.yourForm。$ dirty = true;

Answer 3

如果您想以编程方式执行此操作，则会有一个名为＆＃34; $ setDirty（）＆＃34;的方法。你可以用于那个目的。

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

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

3 个答案: