Angular Js - Lesson 9 - Forms_4 - validators

Non-instance variable version of validated Control code

Creating an instance variable for every input tag on a form is verbose. In the code below we do not use sku: AbstractControl as we did in the previous example as we are not creating instance for an input tag in our form here. Since we are not exposing the sku control as an instance variable we have to get a reference to sku using myForm.find or ngFormControl directive. The method .find allows us to look up a child control by path so we can use it like this. myForm.find('sku').touched. Another way to get a reference to sku is via the ngForm export of the ngFormControl directive. ngFormControl exports itself as ngForm so we can use this export by using the #reference syntax like this. 

#sku = ngForm

But it should be kept in mind that sku is now an instance of ngFormControl directive

 and that sku is not a control. To get a reference to the control we do as sku.control as shown in the following line.

!sku.control.valid which checks if the related input control is valid. Similarly ku.control.touched checks if the related input control has been made dirty. 

Note that local references that we create using the #reference syntax are only available to sibling and children elements but not parents. The following code will not work because the <div class="field" is a parent of the input element that declares the reference.

<div class="field" [class.error]="!sku.control.valid && sku.control.touched">

Here is the complete code.

import { Component } from 'angular2/core';

import {

  ControlGroup,

  FormBuilder,

  Validators,

  CORE_DIRECTIVES,

  FORM_DIRECTIVES

} from 'angular2/common';

@Component({

  selector: 'demo-form-with-validations-shorthand',

  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],

  template: `

    <div class="ui raised segment">

      <h2 class="ui header">Demo Form: with validations (shorthand)</h2>

      <form [ngFormModel]="myForm"

            (ngSubmit)="onSubmit(myForm.value)"

            class="ui form">

        <div class="field"

              [class.error]="myForm.find('sku').touched && !myForm.find('sku').valid">

          <label for="skuInput">

            SKU

          </label>

          <input type="text"

                 id="skuInput"

                 placeholder="SKU"

                 #sku="ngForm"

                 [ngFormControl]="myForm.controls['sku']">

            <div *ngIf="!sku.control.valid"

                 class="ui error message">

              SKU is invalid.

            </div>

            <div *ngIf="sku.control.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 DemoFormValidationsShorthand{

  myForm: ControlGroup;

  

  constructor(fb: FormBuilder){

    this.myForm = fb.group({

      'sku': ['', Validators.required]

    });

  }//constructor ends here.

  

  onSubmit(value: any){

    console.log('You submitted value: ', value.sku);

  }

}//class DemoFormValidationsShorthand ends here.