AngularJS Form Validation – Angular Validation Example

AngularJS Form Validation – Angular Validation Example

AngularJS simple browser or client-side form validation.
AngularJS HTML Dom monitors the state all the model of the form use data bindnig and input fields Like as a

(input, textarea, select),
<input />,<textarea />,<select />

and lets you notify the user about the current state.
Use the HTML5 attribute required to specify that the input field must be filled out:

Accessing Angular Form Properties

form: <form name>.<angular property>
input: <form name>.<input name>.<angular property>

A few key simple points to note display here:
novalidate
ng-model
ng-minlength
ng-maxlength
The simple user name input is required
The email address input is type=”email”
AngularJS Form Validation – Angular Validation Example

Requirements

Simple Name is required(free textbox)
Username is not required so validation, minimum length 3 show error, maximum length 8 show error
Email is not required check emaile address, but has to be a any type valid email
Form submit ng-submit events is disabled if the your form nad form isn’t valid
Show a valid or not validrequired or invalid email error display
Alert awesome if ng-submit submitted correctlyAngularJS Form Validation

Property and Class

1.$valid ng-valid
2.$invalid ng-invalid
3.$pristine ng-pristine
4.$dirty ng-dirty
5.$touched ng-touched

index.html

<div ng-app='infinityApp'>
  <div ng-controller='liveCtrl'>
    <div class='inline-block'>
    <form name='lform' ng-submit="submit(dataresults)">
      <div ng-repeat="livefield in dataresults" ng-form='liveform'>
        <div ng-if='livefield.type_datars == "text"'>
          <input type='text' ng-model='livefield.model' placeholder='{{livefield.livelabel}}' name='myText' required>
          <span class='required' ng-show="liveform.myText.$error.required">*</span>
        </div>
        <div ng-if='livefield.type_datars == "email"'>
          <input type='email' ng-model='livefield.model' placeholder='{{livefield.livelabel}}' name='myEmail' required>
          <span class='required' ng-show="liveform.myEmail.$error.required">*</span>
        </div>
        <div ng-if='livefield.type_datars == "select"'>
          <select ng-model='livefield.model'>
            <option ng-repeat='m in livefield.dataresults' value="{{m.value}}" ng-selected='m.isSelected'>{{m.livelabel}}</option>
          </select>
        </div>
    </div>
    <input type='submit' value='submit form' ng-disabled='lform.$invalid'/>
    </form>
    </div>
    <div ng-show='ResultForm && lform.$valid' class='data-result'>
      <div ng-repeat='model in dataresults'>
        {{model.name}}: {{model.model}}
      </div>
    </div>
  </div>
</div>

index.js

var infinityApp = angular.module('infinityApp',[]);
infinityApp.controller('liveCtrl',function($scope){
  $scope.ResultForm = false;
  $scope.dataresults = [
  {
    type_datars: "text",
    name: "username",
    model: '',
    livelabel: "Username"
  },
  {
    type_datars: "email",
    name: "email",
    model: '',
    livelabel: "Email"
  },
  {
    type_datars: "select",
    name: "gender",
    livelabel: 'Gender',
    model: 'M',
    dataresults: [
      {
        value: 'M',
        livelabel: 'Male',
        isSelected: true,
      },
      {
        value: 'F',
        livelabel: 'Female',
        isSelected: false
      }
    ]
  }];
  
  $scope.submit = function(form){
    $scope.ResultForm = true;
    alert("infinityknow.com is Awesome!!!");
  };
  
});

style.css

@import "compass/css3";

.required{
  color:red;
}

.spacing{
  margin:1.5em;
}

.inline-block{
  @extend .spacing;
  display:inline-block;
}

.data-result{
  @extend .inline-block;
  vertical-align:top;
}

Example