Angular JS custom textbox from a list validation

Question

I am creating dynamic textboxes from a list like the following

Angular js

$scope.phonenumbers = [{text: ''},{text: ''},{text: ''}];

HTML Part

<div class="relativeWrap" ng-repeat="phone in phonenumbers">
     <input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" >
</div>

Now I need to do the following validation in form

Any one of the following 3 textboxes is mandatory. I put required but it is validating all.

Please help

validation will work on submit, where is your form tag submit button etc. add that code too and few more details — Susheel Singh
– Susheel Singh, Commented Oct 25, 2015 at 3:23
i got a list and from that list I am creating 3 textboxes in a form. I needs to validate the textboxes on form submit. Like any one of the textbox is mandatory. ie user can fill any one, not all. Only one in the 3 is mandatory. — ramesh
– ramesh, Commented Oct 25, 2015 at 3:25

Miyuru Ratnayake · Accepted Answer · 2015-10-25 03:25:22Z

1

You will need to use ng-required and conditionally set the required to true for all the field only when none of the fields have a value. To do this you will need to maintain a flag in your controller and bind that your ng-required.

The method in the controller:

$scope.isValue = false;

$scope.textChange = function(){
    $scope.isNoValue = $scope.phonenumbers.some(function(item)){
          return item.text;
     }
}

Your HTML:

<div class="relativeWrap" ng-repeat="phone in phonenumbers">
     <input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" ng-required="!isValue" ng-change="textChange">
</div>

answered Oct 25, 2015 at 3:25

Miyuru Ratnayake

4563 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Angular JS custom textbox from a list validation

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