AngularJS input form validation doesn't fire when it's model changes

Question

I'm trying to get some form inputs to validate if/when their model updates. Currently the only way to remove the pristine class is to manually type in the input box.

Fiddle: http://jsfiddle.net/TgR7A/ In the fiddle if you click 'toggle' the 2 inputs (one is always hidden) populate with content via their models but the form input stays pristine. I know this is AngularJS's way of handling form inputs but I'm hoping for a workaround (A.K.A hack!) that allows for the inputs to validate.

HTML:

<div ng-app>
<div ng-controller="toggleCtrl">
     <h1>{{ title }}</h1>

    <form novalidate class="css-form" name="swtichForm">
        <label>Input</label>
        <input type="text" name="one" class="one" ng-show="input_show=='one'" ng-model="one" required />
        <input type="text" name="two" class="two" ng-show="input_show=='two'" ng-model="two" required />
        <p ng-click="toggle()">Toggle</p>
    </form>
</div>

CSS:

.one {
border-color: blue;
}
.two {
    border-color: yellow;
}
.css-form input.ng-invalid {
    background-color: #FA787E;
}
.css-form input.ng-valid {
    background-color: #78FA89;
}
.css-form input.ng-pristine {
    background: #fff;
}

JS:

function toggleCtrl($scope) {
    $scope.title = "Input toggle";
    $scope.input_show = "one";
    $scope.toggle = function () {
        $scope.one = 'hello';
        $scope.two = 'world';
        $scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
    }
}

What do you mean by model change? Change of value? In your code, you are actually rebinding the DOM and I am not sure what you want to achieve. Please specify. — zs2020
– zs2020, Commented Aug 1, 2013 at 13:42
Form validation is only for when the user changes the form through the form controls, not for when the backing data changes. Unfortunately. — Steve Klösters
– Steve Klösters, Commented Aug 1, 2013 at 13:42
I appreciate that stevuu and was hoping for a work around if possible — Rob B
– Rob B, Commented Aug 1, 2013 at 13:44
@sva I've updated the question so hopefully it makes more sense, thanks! — Rob B
– Rob B, Commented Aug 1, 2013 at 13:53

Community · Accepted Answer · 2017-05-23 11:49:14Z

2

You will find a good explanation here on Stack Overflow.

Unfortunately, althought there is a $setPristine() function, there is no $setDirty() one. As stevuu suggest, the least ugly way to solve your problem is to call $setViewValue() with the new value, and then force the view to update with $render():

$scope.toggle = function () {        
    $scope.switchForm.one.$setViewValue('hello');
    $scope.switchForm.two.$setViewValue('world');

    $scope.switchForm.one.$render();
    $scope.switchForm.two.$render();

    $scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
}

Fiddle

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Aug 1, 2013 at 16:16

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS input form validation doesn't fire when it's model changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related