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 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>
<h2>Demo Form: Sku</h2>
<!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
<form [ng-form-model]="myForm"
(submit)="onSubmit(myForm.value)">
<div class="form-group" [class.has-error]="!sku.valid && sku.touched">
<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 change to: ",value);
}
})
} onSubmit(value){
console.log(value);
} function skuValidator(control){
if(!control.value.match(/^123/)){
return {invalidSku: true};
}
}
}