angularjs - Using FormBuilder to highlight a pristine but invalid form -
using formbuilder in angular 2 highlight dirty , invalid fields easy. however, can submit pristine invalid form without ever changing fields dirty.
for example, code show when submit form without ever touching inputs formgroup invalid .ng-pristine remain on text field. means user not notified wrong text field.
@component({ template: ` <form [formgroup]="myformgroup"> <input type="text" formgroupname="foo"> <input type="submit" value="submit" (click)="onsubmit()"> </form> `, styles: [` .ng-dirty.ng-invalid { border: 2px solid red; } `] }) export class appcomponent { public myformgroup: formgroup; constructor(private _fb: formbuilder) { this.myformgroup = this._fb.group({ foo: ['', validators.required] }); } public onsubmit(): void { console.info('is form pristine?', this.myformgroup.pristine); console.info('is form valid?', this.myformgroup.valid); } } example in plunker.
how can change pristine formcontrol dirty when submitting form?
there's function .markasdirty() on implements abstractcontrol interface. so, in onsumbit():
public onsubmit(): void { this.myformgroup.markasdirty(); console.info('is form pristine?', this.myformgroup.pristine); console.info('is form valid?', this.myformgroup.valid) } forked plunker: http://plnkr.co/edit/k8ixclykiim8qn1wgmvg?p=preview
Comments
Post a Comment