Form change and validity in angularjs

Issue

Whenever any non-readonly input in my form changes and the form is valid, I want to do certain action. Let’s say, my form looks like

<form name="form" novalidate>
    <input ng-model='input.a' required/>
    <input ng-model='input.b' required/>
    <input value='{{output.p | number: 2}}' readonly/>
    <input value='{{output.q | number: 2}}' readonly/>
</form>

Now upon any change of input, I want to do something, whenever input.a and input.b are valid. I tried $watch(input), but it didn’t work. Watching all its members does, but it feels stupid. Adding ng-change to all fields feels better, but still pretty stupid (non-DRY). What’s the proper way?


The other question is how to find out if the input is valid. If I had a button, I could do simply

<button ng-click="doIt()" ng-disabled="form.$invalid">

but how can I access form.$invalid in the controller (it’s not contained in $scope)?

Solution

You should be able to access form.$invalid by doing

$scope.form.$invalid

See here: AngularJs can't access form object in controller ($scope)

To watch for changes in the form, you should be able to do:

$scope.$watchCollection('input')

Answered By – dave

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.