javascript - Force ng-dirty in angularjs form validation - Stack Overflow

admin管理员组

文章数量:1344299

Doing form validation with angularjs I want to mark all required fields as erroneous when the user click submit.

I am using input.ng-dirty.ng-invalid to style the controls with error. So what I want is to set ng-dirty on required controls (or all controls.. it will be the same for me) when the user submits the form.

Validation is working. I understand why, what I am trying could be wrong, but I found no other way to do the same effect, except something that I think is too plicated to be right.

What I tried was:

<div ng-app>
    <form novalidate>
        <input name="formvalue" type="text" ng-model="formvalue" required />
        <input type="submit" />
    </form>
</div>

/

Doing form validation with angularjs I want to mark all required fields as erroneous when the user click submit.

I am using input.ng-dirty.ng-invalid to style the controls with error. So what I want is to set ng-dirty on required controls (or all controls.. it will be the same for me) when the user submits the form.

Validation is working. I understand why, what I am trying could be wrong, but I found no other way to do the same effect, except something that I think is too plicated to be right.

What I tried was:

<div ng-app>
    <form novalidate>
        <input name="formvalue" type="text" ng-model="formvalue" required />
        <input type="submit" />
    </form>
</div>

http://jsfiddle/yq4NG/

• javascript
• angularjs

Share Improve this question Follow asked Aug 19, 2013 at 23:41 FernandoFernando 2,19944 gold badges2929 silver badges4949 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Let's start by adding angular to your jsfiddle by wrapping it in

<div ng-app>...</div>

http://jsfiddle/yq4NG/1/

By default the required field will be validated on input (dirty). If you want to have them validated on submit before any input (pristine), then you can run a function on your submit button that will check for pristine fields and dirty them.

That is what i have done in the example: http://jsfiddle/yq4NG/6/

You could probably build a reusable solution using custom formatters and validators but this is a simple on off solution.

EDIT:

Simpler again using just classes: http://jsfiddle/yq4NG/8/

EDIT [as suggested by @XMLilley in the ments]:

Because angular doesn't provide a $setDirty() method that's equivalent to $setPristine() we're triggering the $dirty state by simply updating the $viewValue with the contents of the $modelValue. It changes nothing, but simulates a user having manually entered each $pristine field and messed around with the value without changing anything.

本文标签： javascriptForce ngdirty in angularjs form validationStack Overflow