Dynamic Field Validation within AngularJS

posted in: AngularJS | 0

With AnglarJS validation has been made so much easier, but there is an issue that normal validation within a ng-repeat directive does not work.  Luckily we found a solution.

Solution is as follow:

Within Controller:

$scope.dynamic_fields = [{ id: 0, name: null, numbered: 0, deleted: 0, created_by: null, created_at: null, updated_by: null, updated_at: null }];

With HTML view:

<div ng-repeat="f in dynamic_fields">
	<ng-form name="validationForm">
		<label>Field Description</label>
		<div class="controls col-xs-5 col-sm-5 col-md-5 col-lg-5">
			<input class="form-input" type="text" name="name" ng-model="dynamic_fields[f.name]" required />
			<div class="custom-error" ng-show="validationForm.name.$invalid">
				<span ng-show="validationForm.name.$error.required">{{f.name}} is required.</span>
			</div>
		</div>
		<label>Field number</label>
		<div class="controls col-xs-5 col-sm-5 col-md-5 col-lg-5">
			<input class="form-input" type="text" name="number" ng-model="dynamic_fields[f.number]" ng-pattern="/^[-+]?\d+(\.\d{1,4})?$/" />
			<div class="custom-error" ng-show="validationForm.number.$invalid">
				<span ng-show="validationForm.number.$error.pattern">Invalid entry for {{f.number}}.</span>
			</div>
		</div>
	</ng-form>
</div>

 

Leave a Reply