×

Html & Html5

The World's best Software Development Study Portal

AngularJS Forms Validation


  • AngularJS offers client-side form validation

  • Use the HTML5 attribute required to specify that the input field must be filled out

  • AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.

  • AngularJS also holds information about whether they have been touched, or modified, or not.

  • You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

  • Following directives are generally used to track errors in an AngularJS form:

    1. $dirty - states that value has been changed.
      $invalid - states that value entered is invalid.
      $error - states the exact error.



    Required example

    <body ng-app=""> <form name="myForm"> <input name="myInput" ng-model="myInput" required> </form> <p>The input's valid state is:</p> <h1>{{myForm.myInput.$valid}}</h1> </body>
    Output

    {{myForm.myInput.$valid}}




    Example Email

    <body ng-app="">
    <p> Write an E-mail address </p>
    <form name="myForm">
    <input type="email" name="myInput" ng-model="myInput">
    </form>
    <h1>{{myForm.myInput.$valid}}</h1>
    </body>


    Output

    {{myForm.myInput.$valid}}