[ANGUALR 2] Watch for changes

You can watch for form/control changes by using. Valuechanges.observe ({...}):

         This . Sku.valueChanges.observer ({            Next: (value)={                console.log ("SKU has changed to:" , value);            }        })                  This . MyForm.valueChanges.observer ({            Next: (value)={                console.log ("form has a change To: ", value);            }        })

Code:

Import {Component, View, Form_directives, validators, Formbuilder, ngif} from ' Angular2/angular2 '; @Component ({selector:' Demo-form-sku '}) @View ({directives: [Form_directives, Ngif], Template: '<div> (Submit)= "OnSubmit (myform.value)" > <div class= "form-group" [class.has-error]= "!sku.valid && sku.touched" &                Gt <label for= "Skuinput" >SKU</label> <input type= "text"class= "Form-control"ID= "Skuinput"#sku= "Form"placeholder= "SKU"[ng-form-control]= "myform.controls[' SKU '" > </div> <div *ng-if= "!sku.control.valid"class= "Bg-warning" >sku is invalid</div> <button type= "Submit" class= "BTN Btn-default" >Submit</button> <div *ng-if= "Sku.control.hasError (' Invalidsku ')" >SKU is required</div> </form> <div *ng-if= "!myform.valid"class= "Bg-warning" >form is invalid</div> </div>    `})    Export class Demoformsku {myform:controlgroup; Constructor (Fb:formbuilder) { This. MyForm =Fb.group ({"SKU": ["" ", Validators.compose ([validators.required, Skuvalidator])});  This. SKU = This. myform.controls[' SKU '];  This. Sku.valueChanges.observer ({next: (value)={Console.log ("SKU has changed to:", value); }        })                 This. MyForm.valueChanges.observer ({next: (value)={Console.log ("Form has a change to:", value);    }})} OnSubmit (value) {Console.log (value); }        functionSkuvalidator (Control) {if(!control.value.match (/^123/)){             return{invalidsku:true}; }    }}

[ANGUALR 2] Watch for changes