Angular Js - Lesson 9 - Forms_3 - validators

Validators in Angular Js 2

/*
Validators to validate the form controls.
Using FormBuilder in this example.
We are using just one input field in this form.
Explicitly setting the sku Contorl as an instance variable in the controller. This is the
most flexible way to deal with individual controls in the view as we set up an instance
variable for each control in the class in which we define this component.
 */
import { Component } from 'angular2/core';
import {
  ControlGroup,
  AbstractControl,
  FormBuilder,
  Validators,
  FORM_DIRECTIVES,
  CORE_DIRECTIVES
} from 'angular2/common';

@Component({
  selector: 'demo-form-with-validations-explicit',
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
    <div class:"ui raised segement">
      <h2 class:"ui header">Demo Form: with validations (explicit)</h2>
     
      <form [ngFormModel]="myForm"
            (ngSubmit)="onSubmit(myForm.value)"
            class="ui form">
            <!--
              We are using Semantic UI CSS Framework's CSS class .error which means
              if we add the class error to the <div class="field"> it will show the
              input tag with a red border.
              .touched below means  that we only want to show the error if the user
              has tried editing the form. .valid below means that the control is
              invalid now.
            -->
        <div class="field"
             [class.error]="sku.touched && !sku.valid">
          <label for="skuInput">SKU</label>
          <input type="text"
                 id="skuInput"
                 placeholder="sku"
                 [ngFormControl]="sku">
            <div *ngIf="!sku.valid" class="ui error message">
              SKU is invalid.
            </div>
            <div *ngIf="sku.hasError('required')" class="ui error message">
              SKU is required.
            </div>
        </div>
            <div *ngIf="!myForm.valid" class="ui error message">
              Form is invalid.
            </div>
           
            <button type="submit" class="ui button">Submit</button>    
     </form>
    </div>
  `
})

export class DemoFormWithValidationsExplicit{
  myForm: ControlGroup;
  /* There are two ways we can access the validation value in the view:
  1. We can explicitly assign the Control sku to an instance variable of the class and
  this gives easy access to the Control in the view. This is what we are doing in
  this example. The kickback of this method is that we have to creat n number of
  instance variable for n controls.
  Another way is to lookup the Control sku from myForm in the view. This requires
  less work in the Component definiton class but is slightly more verbose in the view.
   */
  sku: AbstractControl;
  /* During injection an instance of FormBuilder will be created and we assign that
  instance to the local variable fb in the arguments to the constructor. */
  constructor(fb: FormBuilder){
    /* We create a ControlGroup by calling method fb.group() which takes an object
    of key-value pairs that specify the controls in this group. */
    this.myForm = fb.group({
      /* We are using FormBuilder therefore, we will using the following syntax.
      Otherwise to assign a validator to a Control object we can simply pass the validator
      to the constructor of that control as given below:
      let control = new Control('sku', Validators.required);
       */
      'sku': ['', Validators.required]
    });
    this.sku = this.myForm.controls['sku'];
  }//constructor ends here.
 
  onSubmit(value: string): void{
    console.log('You submitted value: ', value);
  }
 
}//class DemoFormWithValidationsExplicit ends here.