How do I check form validity with angularjs

Question

I m very new to angularjs  Say my app has a form  Using the inspector  I noticed that if angularjs thinks that the form is invalid  it adds an ng-invalid class to the form  Lovely   So it seems that in order to check if the form is valid I need to pollute my code with Jquery selector   What is the angularjs way to indicate form validity without using a form controller

User · Answer

Example   lt div ng-controller  ExampleController  gt     lt form name  myform  gt     Name   lt input type  text  ng-model  user name    gt  lt br gt     Email   lt input type  email  ng-model  user email    gt  lt br gt     lt  form gt   lt  div gt    lt script gt    angular module  formExample            controller  ExampleController      scope   function  scope            if form is not valid then return the form       if   scope myform  valid           return                 lt  script gt

User · Answer

form   directive in module ng Directive that instantiates FormController    If the name attribute is specified  the form controller is published onto the current scope under this name   Alias  ngForm  In Angular  forms can be nested  This means that the outer form is valid when all of the child forms are valid as well  However  browsers do not allow nesting of  elements  so Angular provides the ngForm directive which behaves identically to  but can be nested  This allows you to have nested forms  which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive  Since you cannot dynamically generate the name attribute of input elements using interpolation  you have to wrap each set of repeated inputs in an ngForm directive and nest these in an outer form element   CSS classes  ng-valid is set if the form is valid   ng-invalid is set if the form is invalid   ng-pristine is set if the form is pristine   ng-dirty is set if the form is dirty   ng-submitted is set if the form was submitted   Keep in mind that ngAnimate can detect each of these classes when added and removed   Submitting a form and preventing the default action  Since the role of forms in client-side Angular applications is different than in classical roundtrip apps  it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server  Instead some javascript logic should be triggered to handle the form submission in an application-specific way   For this reason  Angular prevents the default action  form submission to the server  unless the  element has an action attribute specified   You can use one of the following two ways to specify what javascript method should be called when a form is submitted   ngSubmit directive on the form element  ngClick directive on the first button or input field of type submit  input type submit    To prevent double execution of the handler  use only one of the ngSubmit or ngClick directives    This is because of the following form submission rules in the HTML specification   If a form has only one input field then hitting enter in this field triggers form submit  ngSubmit  if a form has 2  input fields and no buttons or input type submit  then hitting enter doesn t trigger submit if a form has one or more input fields and one or more buttons or input type submit  then hitting enter in any of the input fields will trigger the click handler on the first button or input type submit   ngClick  and a submit handler on the enclosing form  ngSubmit    Any pending ngModelOptions changes will take place immediately when an enclosing form is submitted  Note that ngClick events will occur before the model is updated    Use ngSubmit to have access to the updated model   app js   angular module  formExample          controller  FormController      scope   function  scope         scope userType    guest            Form    lt form name  myForm  ng-controller  FormController  class  my-form  gt    userType   lt input name  input  ng-model  userType  required gt     lt span class  error  ng-show  myForm input  error required  gt Required  lt  span gt    userType     userType     myForm input  valid     myForm input  valid     myForm input  error     myForm input  error     myForm  valid     myForm  valid     myForm  error required       myForm  error required     lt  form gt    Source  AngularJS  API  form

User · Answer

You can also use myform  invalid  E g   if  scope myform  invalid  return

User · Answer

When you put  lt form gt  tag inside you ngApp  AngularJS automatically adds form controller  actually there is a directive  called form that add nessesary behaviour   The value of the name attribute will be bound in your scope  so something like  lt form name  yourformname  gt     lt  form gt  will satisfy      A form is an instance of FormController  The form instance can optionally be published into the scope using the name attribute    So to check form validity  you can check value of  scope yourformname  valid property of scope    More information you can get at Developer s Guide section about forms

[angularjs] How do I check form validity with angularjs?

Examples related to angularjs