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:
The simple user name input is required
The email address input is type=”email”
AngularJS Form Validation – Angular Validation Example

READ :  Angular HTTP POST method request & response


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


<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 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 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>
    <input type='submit' value='submit form' ng-disabled='lform.$invalid'/>
    <div ng-show='ResultForm && lform.$valid' class='data-result'>
      <div ng-repeat='model in dataresults'>
        {{}}: {{model.model}}


var infinityApp = angular.module('infinityApp',[]);
  $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(" is Awesome!!!");


@import "compass/css3";



  @extend .spacing;

  @extend .inline-block;


READ :  Angular Keep session alive Timeout management

Add a Comment

Your email address will not be published. Required fields are marked *