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

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -