1

I have an ng-repeater with each row having an input of type checkbox, as well as 3 text fields. I want to allow the checkbox to be selected ONLY if the user enters some text in each of the 3 text fields. If the user tries selecting a checkbox without entering data first, I want to display a warning message.

I am assuming I have to do some checking for the three ng-models (for text fields) is null or undefined or something, but not sure how to do it in the HTML.

My HTML looks something like this:

<div ng-repeat="o in objects">
    <input type="checkbox" class="myClass" ng-click="doSomething(argument)>
    ....
    ....
    <input ng-model="model1">
    <input ng-model="model2">
    <input ng-model="model3">

EDIT: Found an answer here AngularJS - Form Custom Validation - Check if at least one input is empty

Community
  • 1
  • 1
gallly
  • 1,201
  • 4
  • 27
  • 45

1 Answers1

1

You could disable them and use ng-change to monitor that all 3 of the text inputs have value.

Sample html:

<input type="text" ng-model="data.item3"  ng-change="update()"/>

<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>

Example Controller

.controller('MainCtrl',function($scope){
     $scope.checksDisabled=true;
     var data = $scope.data ={ };
     $scope.update=function(){
        $scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
     }         
});

DEMO

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks for the answer, I decided to go with the route I posted in my edit because its less code, but if something goes wrong I can use this as backup :). – gallly Nov 03 '14 at 23:38
  • understood, personally I prefer less crap in the html and also easier to test with variables – charlietfl Nov 03 '14 at 23:38
  • Yeah you are probably right, is doing the check in the html more taxing or in this case is it no issue? Is checking checksDisabled from the ng-disabled any more efficient? or just cleaner – gallly Nov 03 '14 at 23:42
  • probably both , the function gets called rarely (events only) and the variable won't change between events – charlietfl Nov 03 '14 at 23:47