Search code examples
javascriptangularjsformsangularjs-validation

Form change and validity in angularjs


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')