angularJS: input checked with validation

Question

I'm so new in javascript/angularJS, what I have to do is maybe simple, but I don't really know. I have a checkbox like this :

<input id="myInput" type="checkbox" ng-checked="isChecked">

And now when i click to perform the value isChecked in my model is updated correctly. This is the simple part. Now I have to add a control on the oncheck event. In other words: before that isChecked is being updated, the value in the model I have to perform a validation and if the validation return false, the value isChecked should not be updated.

Pop-A-Stash · Accepted Answer · 2017-03-28 20:35:12Z

2

You could use ng-model and ng-change instead of ng-checked to perform a function when the checkbox is checked or unchecked:

<input id="myInput" type="checkbox" ng-model="myModel.isChecked" ng-change="checkboxChanged()">

So that, in your controller, you can handle the event with a function:

$scope.myModdel = {
  isChecked = false    //setting initial value for checkbox
};
$scope.checkboxChanged = function() {
  if( some validation error && $scope.myModel.isChecked ) {
    $scope.myModel.isChecked = false;  // uncheck checkbox
  }
}

Be sure not to use both ng-model and ng-checked as described in the docs:

Note that [ng-checked] should not be used together with ngModel, as this can lead to unexpected behavior.

You can solve your CSS issue by using ng-class like so:

<input id="myInput" type="checkbox" ng-model="myModel.isChecked" ng-change="checkboxChanged()" ng-class="{'my-class-name': myModel.isChecked }">

edited Mar 28, 2017 at 20:35

answered Mar 28, 2017 at 20:01

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

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

4 Comments

aeroxr1 Over a year ago

I need ng-checked, because I have a css that uses the checked attribute. I thought to use ng-click and ng-checked : <input id="myInput" type="checkbox" ng-model="isChecked" ng-checked="checkboxChanged()"> but I think this is an error like use both ng-model and ng-checked.

Pop-A-Stash Over a year ago

Ah, I see. Alternatively you could set up a watch on the isChecked scope variable.

Pop-A-Stash Over a year ago

A watcher has it's own issues, though. I still recommend the first answer and using ng-class instead of the checked property to solve your styling issue.

aeroxr1 Over a year ago

I hear that watcher is much heavy

Collectives™ on Stack Overflow

angularJS: input checked with validation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related