Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular JS 2 (Form dropdown (product.label for (what to show as options,…

- - - - Making it required error message
        
        ng-show="orderForm.name.$error.required && orderForm.name.$touched"
        
        Use touched so want show the error message until it has been interacted with
  - - - uses the $invalid state
  - - - contains any validations set to the input
        
        for example required
    - - valid or not - boolean
    - - something has been changed
    - - empty
    - - currently clicked into
    - - not been clicked into
- - - - Two way binding
      - becuase the directive uses the data within its bindtocontroller, which within the front-end element has a data attribute that gets set the order controller
      - The input ng-models are from the order controller
    - - has a submit function for actually submitting to a api
      - has properties for the form input values
    - - But has the element nested within a order controller
      - Has a submit that uses the function from a parent controller - orderController
      - that has the directive bind to controller attribute data
      - Uses the directive element
    - - Set to use a element
      - binds to controller through data property
      - submit function for pre-processing
      - Uses a controller that has the form data - OrderFormController
      - that has the form html within a template
  - - - Actual end point processing of submit
        
        The directive element has a submit attribute that uses a function
        
        <order-form data="order.customerOrder" submit="order.submitOrder();"></order-form>
        
        nested in
        
        <div ng-controller="OrderController as order">
        
        goes to the html parent controller
        
        Which that function will do the submitting to a endpoint
    - - template html has a ng-submit going to submit function
        
        <form name="orderForm" novalidate ng-submit="form.onSubmit();">
        
        which will go to the directive controller submit function
    - - submit: '&'
  - - - to link it to a controller file
        
        so can use the controller properties within the directive template code
        
        for example as ng-model properties within form inputs
    - - bind the element property to the controller
        
        data: '='
        
        two way binding as new attribute has the same name
  - - - So the customerOrder property value will go inside this element's data attribute
      - .customerOrder is a property of the order controller
      - order is a alias for the controller
      - data is a new custom attribute
      - order form is the new directive