AngularJS > Forms & Validations

Form methods and properties in AngularJS

What are different AngularJS form methods and properties and what are their uses?


AngularJS has many inbuilt form methods and properties that can be used to control the behavior of the form and its controls (html input elements). Here we will discuss most frequently and used methods and property of form in AngularJS.

Methods

  • $setPristine() - used to set the control to its pristine state ie. page load state. This removes the ng-dirty class and set ng-pristine class to the controls.

  • $setDirty() - used to set the control to its dirty state ie. it is changed. This removes the ng-pristine class and adds ng-dirty class to the controls.

  • $setUntouched() - used to set the control to untouched state. This removes the ng-touched class and set ng-untouched class. This method is used to restore the state of the control if the control is touched.

  • $setTouched() - used to set the control to touced state ie. user has focused on the element and shifted focus. This removes the ng-untouched class and set ng-touched class to the control.

Properties

  • $viewValue - actual string value that shows in the view
  • $pristine - returns true if user has not interacted with the form
  • $dirty - returns true if user has interacted with the form
  • $valid - returns true if form and its controls are valid
  • $invalid - returns true if at least one control of the form is invalid
  • $submitted - returns true if the user has submitted the form even if the form was invalid (user has clicked on the submit button)
  • $error - object that contains tokens (kind of property) of the failed validators
    • $error.email - the email vaidation failed
    • $error.max - the maximum value allowed failed
    • $error.min - the minimum value allowed failed
    • $error.maxlength - the maximum characters allowed failed
    • $error.minlength - the minimum characters allowed failed
    • $error.number - the value is not number
    • $error.pattern - the control value pattern didn't match with the control value
    • $error.required - the required validation failed for the control
    • $error.url - the control value is not valid url
    • $error.date - the control value is not valid date
    • $error.time - the control value is not valid time (similarly, $error.week or $error.month is also there)
 Views: 2124 | Post Order: 52




Write for us