Clash Royale CLAN TAG#URR8PPP

angularjs text box must have max length digits

I have 30 text boxes first text box must have 9 numbers and second text box must have 3 digits and I have code like this after first text box reached max length it moves to next text box.

How can I achieve this?

function numOnly() {
var directive =
restrict: 'A',
scope:
ngModel: '=ngModel'
,
link: link
;
return directive;

function link(scope, element, attrs)
scope.$watch('ngModel', function (newVal, oldVal) arr[0] === '.')) return;
if (isNaN(newVal))
//scope.ngModel = oldVal;
scope.ngModel = "";

);



<tr ng-repeat="cl in codelist" ng-if="$odd" >
<td>$index+1</td>
<td>
<label ng-model="codelist[$index].CodeNumber">codelist[$index].CodeNumber</label>
</td>
<td ng-class=" 'has-error' : codeForm.clHtnoA$index.$invalid && (codeForm.clHtnoA$index.$dirty ">
<input type="text" name="clHtnoA$index" ng-model="codelist[$index].HtnoA" num-only maxlength="9" ng-readonly="codelist[$index].Status" required class="form-control" />
<span ng-show="codeForm.clHtnoA$index.$error.required && (codeForm.clHtnoA$index.$invalid.$dirty || submitted)" class="help-block">HallTicket is required.</span>
</td>
<td ng-class="">
<input type="text" name="clHtnoB$index" ng-model="codelist[$index].HtnoB" num-only maxlength="3" ng-change="findNameAB($index)" ng-readonly="codelist[$index].Status" required class="form-control" />
<span ng-show="codeForm.clHtnoB$index.$error.required && (codeForm.clHtnoB$index.$invalid.$dirty || submitted)" class="help-block">3 no's only.</span>
</td>
<td>
<span ng-model="codelist[$index].Sname">codelist[$index].Sname</span>
</td>
</tr>


2 Answers
2

Directive is you're solution:

app.directive("range", [function()
return
restrict: "A",
link: function(scope, elem, attrs)
var range = parseInt(attrs.limitTo);
angular.element(elem).on("keypress", function(e)
if (this.value.length == range) e.preventDefault();
);


]);


<input type="text" ng-model="mybox1" range="9"/>


make use of ng-maxlength

<div ng-app="myApp" ng-controller="myCtrl">
<form>
<input type="text" id="part1" ng-model="myObject.part1" ng-maxlength = "9"/>
<input type="text" id="part2" ng-model="myObject.part2" ng-maxlength = "3" />
</form>
</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.