angular js forms synopsis

angular js forms are a whole sophisticated micro framework within angular

angular builds on top of html and provides directives for form, input, textarea, select and provides a model instance for each, so when you write the following you're really using the angular input directive:
    <input type="text" ng-model="person.name" required>
    <input type="checkbox" ng-model="person.wantsEmails">

here's the docs for input directive which lists all the options, note that angular supports enforcing different types such as email etc.
angular has very good support for html select and iterating options

some key directives include the following

ng-model 

  • creates a 2 way binding to the data on the page, angular ensures changes flow from the html into the ng-model and also flow from the ng-model to the html (contrast this to ng-bind or {{}} which are one way only binding from model to html)
  • each ng-model creates an instance of an ngModelController and that instance is available to all directives on the input, ngModelController: 
    • manages the data binding between the model and html
    • tracks if the data has changed since it was initialized ngModelController.$dirty (set to true if changed else false)
      • adds css classes ng-pristine and ng-dirty to the input based on change state. You can apply styles with these classes
    • works with other directives to track if the value is valid or invalid ngModelController.$invalid, ngModelController.$valid (set to true if valid else false)
      • adds css classes ng-valid and ng-invalid to the input based on validity. You can apply styles with these classes
    • has a transformation pipeline between the html and model for data flowing each way; it has 2 arrays $formatters and $parsers to change the data e.g. convert to/from date
    • tracks errors in ngModelController.$error , an object with details on the kinds of errors


ng-form

  • creates instance of ngFormController which manages valid/invalid and pristine/dirty at the form level
  • works with ngModelController(s), each of which register themselves with their parent ngFormController
  • ngFormController also has $dirty and $invalid which you could use to enable/disable a form submit button perhaps
  • form submission can be done with ng-submit on the form or ng-click on a submit button




Comments

Popular posts from this blog

deep dive into Material UI TextField built by mui

angular js protractor e2e cheatsheet

react-router v6.4+ loaders, actions, forms and more