Dynamic form validation with ng-form

Dynamic form validation with ng-form

Validation with ng-form isn’t difficult, once you get the hang of it. But figuring out some of the advanced features isn’t that trivial. One pretty common scenario a web application needs to do is dynamic form validation. Dynamic meaning the HTML isn’t pre-defined, but is dependent on a condition, which is one of the things that make Angular so great in the first place!

Let’s say you have a ng-repeat and you include a ng-form within that loop. The ng-form needs a unique name.

Example:

<div ng-repeat=”arg in inputArray”>

<ng-form name=”form{{arg.Name}}”>

<div ng-show=”form{{arg.Name}}.$valid == false”>

{{arg.validationMessage}}

</div>

</ng-form>

</div>

The name is unique within the inputArray object collection. The validationMessage property is defined on the arg object, and when the validation isn’t met, the message will display.

For example when you’re iterating through the inputArray you can place a ng-required on an input tag.

<input ng-required=”arg.required()” />

Have required as a function works great because you can put logic in the function to support conditional logic. If there’s not conditonial logic you can simply return true.

Angular form validation works really well once you understand how it works. Give it some time and you’ll really like working with it.

Comments are closed.