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),
,<textarea />,

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>.
input: <form name>..

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>
  <div>
    <div class='inline-block'>
    <form name='lform'>
      <div>
        <div>
          
          <span class='required'>*</span>
        </div>
        <div>
          
          <span class='required'>*</span>
        </div>
        <div>
          
            {{m.livelabel}}
          
        </div>
    </div>
    
    </form>
    </div>
    <div class='data-result'>
      <div>
        {{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