diff --git a/modules/@angular/forms/src/directives/ng_form.ts b/modules/@angular/forms/src/directives/ng_form.ts index e770522e1d..6c63c25b30 100644 --- a/modules/@angular/forms/src/directives/ng_form.ts +++ b/modules/@angular/forms/src/directives/ng_form.ts @@ -174,7 +174,12 @@ export class NgForm extends ControlContainer implements Form { return false; } - onReset(): void { this.form.reset(); } + onReset(): void { this.resetForm(); } + + resetForm(value: any = undefined): void { + this.form.reset(value); + this._submitted = false; + } /** @internal */ _findContainer(path: string[]): FormGroup { diff --git a/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts b/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts index a228f35184..6bca6c047b 100644 --- a/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts +++ b/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts @@ -181,7 +181,12 @@ export class FormGroupDirective extends ControlContainer implements Form, return false; } - onReset(): void { this.form.reset(); } + onReset(): void { this.resetForm(); } + + resetForm(value: any = undefined): void { + this.form.reset(value); + this._submitted = false; + } /** @internal */ _updateDomValue() { diff --git a/modules/@angular/forms/test/template_integration_spec.ts b/modules/@angular/forms/test/template_integration_spec.ts index 44fd2cd185..6abeb45527 100644 --- a/modules/@angular/forms/test/template_integration_spec.ts +++ b/modules/@angular/forms/test/template_integration_spec.ts @@ -150,6 +150,33 @@ export function main() { expect(form.value.name).toEqual(null); }))); + it('should reset the form submit state when reset button is clicked', + fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + const t = ` +
+ +
+ `; + + const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); + tick(); + fixture.debugElement.componentInstance.name = ''; + fixture.detectChanges(); + tick(); + + const form = fixture.debugElement.children[0].injector.get(NgForm); + const formEl = fixture.debugElement.query(By.css('form')); + + dispatchEvent(formEl.nativeElement, 'submit'); + fixture.detectChanges(); + tick(); + + dispatchEvent(formEl.nativeElement, 'reset'); + fixture.detectChanges(); + tick(); + expect(form.submitted).toEqual(false); + }))); + it('should emit valueChanges and statusChanges on init', fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { diff --git a/tools/public_api_guard/forms/index.d.ts b/tools/public_api_guard/forms/index.d.ts index 08f92fca2a..f26af9bdc3 100644 --- a/tools/public_api_guard/forms/index.d.ts +++ b/tools/public_api_guard/forms/index.d.ts @@ -294,6 +294,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form removeControl(dir: NgControl): void; removeFormArray(dir: FormArrayName): void; removeFormGroup(dir: FormGroupName): void; + resetForm(value?: any): void; updateModel(dir: NgControl, value: any): void; } @@ -371,6 +372,7 @@ export declare class NgForm extends ControlContainer implements Form { onSubmit(): boolean; removeControl(dir: NgModel): void; removeFormGroup(dir: NgModelGroup): void; + resetForm(value?: any): void; setValue(value: { [key: string]: any; }): void;