Template-Driven

• Template-Driven Forms use a combination of builtin Directives and local template variables to handle the form:
  • NgForm - Allows getting form information and override default submit behavior
  • NgControl - ​Directive for tracking state and naming of each form elements in ngForm.
  • NgSumbit - Exectues an event handler on button type="submit"
• By default the <form> element is selected by NgForm Directive even if not explicitly specified. This can be reverted using the NgNoFrom Directive on <form> element.

Template-Driven

• Local template variables are used on the form and each input to get information
  • Local variables in this context get the content of the Directives ngForm, ngControl and not the element.
    This is why the syntext is
    #<variable>="ngForm" (ngForm is exported from these directives)
• Local variables can be used to check validations either at input level or Form level
• Local variables can be used to send specific or all Form data in the ngSubmit event handler

Template-Driven

• Builtin validation are supported:
  • required - Requires a form control to have a non-empty value
  • minlength - Requires a form control to have a value of a minimum length
  • maxlength - Requires a form control to have a value of a maximum length
  • pattern - Requires a form control’s value to match a given regex
• Custom validation can be added using Directive that uses validator API

Template-Driven

• Example

<form #f="ngForm" (ngSubmit)="onFormSubmit(f.value)">
    <label>Name:</label><input type="text" ngControl="name" #name="ngForm" required />
    <br />
    <div [hidden]="name.valid" [style.color]="'red'">Invalid name input</div>
    <label>Email:</label><input type="text" ngControl="email" #email="ngForm" />
    <br />
    <div [hidden]="email.valid " [style.color]="'red'">Invalid email input</div>

    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

Template-Driven

• Two Way data-binding​
  • Angular2 is one-time bound by default. In some cases, especially user inputs, it may be useful to have two-way data binding
  • Angular2 uses property bindings for inputs and event bindings for outputs. We can have two way binding using both with NgModel builtin Directive:

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event"></input>

• Since it may be useful, Angular 2 has short syntax for it:

<input [(ngModel)]="todo.text"></input>

<form (ng-submit)="onSubmit()" #f="form">
      <input ng-control="name" [(ng-model)]="name">
      <button>Click me and check console</button>
</form>

Template-Driven

• How is two-way binding implemented?
  • Example:

@Directive({
  selector: '[ngModel]',
  host: {
    "[value]": 'ngModel',
    "(input)": "ngModelChange.next($event.target.value)"
  }
})
class NgModelDirective {
  @Input() ngModel:any; // stored value
  @Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter
}

• This is a naive example but it just shows the concept
• In Angular 2, the two-way behavior is a lot more predictable. It does not break any of the guarantees that Angular 2 provides. This is just some syntax sugar, nothing else.