Form Validation

Example of form

<form>
    <input type="text">
    <input type="textarea">
    <input type="checkbox">
    ...
    <input type="submit">
</form>

Steps to Form Validation

Step 1: Create a form in HTML with name attributes

<form name="formName">
    <input type="text" name="name">
    <button>Submit</button>
</form>

Step 2: Bind Input with ng-model

<form name="formName">
    <input type="text"
           name="name"
           ng-model="ctrl.name">
    <button ng-click="ctrl.go()">Submit</button>
</form>

Step 3: Declare HTML5 Validation Attributes

<form name="formName" novalidate>
    <input type="text"
           name="name"
           ng-model="ctrl.name"
           required
           minlength="4">
    <button ng-click="ctrl.go()">Submit</button>
</form>

Step 4: Use Angular Form Bound Objects

<input type="text"
       name="name"
       ng-model="ctrl.name"
       required
       minlength="4">
<span ng-if="formName.name.$error.required && formName.name.$touched">
    Name is required
</span>
...
<button ng-disable="formName.$invalid"
        ng-click="ctrl.go()">
    Submit
</button>

Step 5: Use Angular Validation Styles

.ng-touched.ng-valid{
    border: 2px green solid;
}

.ng-touched.ng-invalid{
    border: 2px red solid;
}