feat(forms): add ability to reset forms (#9974)

Closes #4914
Closes #4933

modules/@angular/forms/test/integration_spec.ts

@@ -278,6 +278,59 @@ export function main() {
              });
            }));
 
+    it('should clear value in UI when form resets programmatically',
+       inject(
+           [TestComponentBuilder, AsyncTestCompleter],
+           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+             const login = new FormControl('oldValue');
+             const form = new FormGroup({'login': login});
+
+             const t = `<div [formGroup]="form">
+                <input type="text" formControlName="login">
+               </div>`;
+
+             tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
+               fixture.debugElement.componentInstance.form = form;
+               fixture.detectChanges();
+
+               login.updateValue('new value');
+
+               const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+               expect(loginEl.value).toBe('new value');
+
+               form.reset();
+               expect(loginEl.value).toBe('');
+               async.done();
+             });
+           }));
+
+    it('should set value in UI when form resets to that value programmatically',
+       inject(
+           [TestComponentBuilder, AsyncTestCompleter],
+           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+             const login = new FormControl('oldValue');
+             const form = new FormGroup({'login': login});
+
+             const t = `<div [formGroup]="form">
+                <input type="text" formControlName="login">
+               </div>`;
+
+             tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
+               fixture.debugElement.componentInstance.form = form;
+               fixture.detectChanges();
+
+               login.updateValue('new value');
+
+               const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
+               expect(loginEl.value).toBe('new value');
+
+               form.reset({'login': 'oldValue'});
+
+               expect(loginEl.value).toBe('oldValue');
+               async.done();
+             });
+           }));
+
     it('should support form arrays',
        fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
          const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
@@ -1283,6 +1336,32 @@ export function main() {
            expect(fixture.debugElement.componentInstance.name).toEqual('updated');
          })));
 
+      it('should reset the form to empty when reset button is clicked',
+         fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+           const t = `
+            <form>
+              <input name="name" [(ngModel)]="name">
+            </form>
+           `;
+
+           const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
+           tick();
+           fixture.debugElement.componentInstance.name = 'should be cleared';
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.children[0].injector.get(NgForm);
+           const formEl = fixture.debugElement.query(By.css('form'));
+
+           dispatchEvent(formEl.nativeElement, 'reset');
+           fixture.detectChanges();
+           tick();
+
+           expect(fixture.debugElement.componentInstance.name).toBe(null);
+           expect(form.value.name).toEqual(null);
+         })));
+
+
       it('should emit valueChanges and statusChanges on init',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            const t = `<form>