Angular Js - Lesson 9 - Forms_1

Angular Js Forms - part 1

Here is the code for the form above.

import { Component } from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular2/common';
/* FORM_DIRECTIVES is a constant that Angular provides for us as a shorthand
to several driectives that are all useful in a form.
FORM_DIRECTIVES includes:
ngControl
ngControlGroup
ngForm
ngModel
....... and many more.
By injecting FORM_DIRECTIVES we can use any of the directives in that list in our view template. */

@Component({
  selector: 'demo-form-sku',
  directives: [FORM_DIRECTIVES],
  /* Since we have injected FORM_DIRECTIVES, therefore, that makes
  ngForm available to our view and will get attached to any
  element that matches their selector. In the template below
  bgForm directive gets automatically attached to the <form> tag
  in the view. This happens behid the scenes.
  */
  /* ngForm gives us two important pieces of functionalities:
  (a). A ControlGroup named ngForm.
  (b). An output (ngSubmit) which we use in our form to call the
  method onSubmit(f.value)
  */
  /* SKU is an abbreviation for Stock Keeping Unit. */
  template: `
  <div class="ui raised segment">
    <h2 class="ui header">Demo Form: Sku</h2>
    <form #f="ngForm"
          (ngSubmit)="onSubmit(f.value)"
          class="ui form">

      <div class="field">
        <label for="skuInput">SKU</label>
        <input type="text"
               id="skuInput"
               placeholder="SKU"
               ngControl="sku">
      </div>

      <button type="submit" class="ui button">Submit</button>
    </form>
  </div>
  `
})
export class DemoFormSku {
  onSubmit(form: any): void {
    console.log('you submitted value:', form);
  }
}