feat(forms): add the submitted flag to NgForm and NgFormModel directives
Closes #2960 Closes #7449
This commit is contained in:
parent
89f61087c7
commit
420e83a396
|
@ -86,6 +86,8 @@ export const formDirectiveProvider: any =
|
||||||
exportAs: 'ngForm'
|
exportAs: 'ngForm'
|
||||||
})
|
})
|
||||||
export class NgForm extends ControlContainer implements Form {
|
export class NgForm extends ControlContainer implements Form {
|
||||||
|
private _submitted: boolean = false;
|
||||||
|
|
||||||
form: ControlGroup;
|
form: ControlGroup;
|
||||||
ngSubmit = new EventEmitter();
|
ngSubmit = new EventEmitter();
|
||||||
|
|
||||||
|
@ -96,6 +98,8 @@ export class NgForm extends ControlContainer implements Form {
|
||||||
composeAsyncValidators(asyncValidators));
|
composeAsyncValidators(asyncValidators));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get submitted(): boolean { return this._submitted; }
|
||||||
|
|
||||||
get formDirective(): Form { return this; }
|
get formDirective(): Form { return this; }
|
||||||
|
|
||||||
get control(): ControlGroup { return this.form; }
|
get control(): ControlGroup { return this.form; }
|
||||||
|
@ -158,6 +162,7 @@ export class NgForm extends ControlContainer implements Form {
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit(): boolean {
|
onSubmit(): boolean {
|
||||||
|
this._submitted = true;
|
||||||
ObservableWrapper.callEmit(this.ngSubmit, null);
|
ObservableWrapper.callEmit(this.ngSubmit, null);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,6 +107,8 @@ export const formDirectiveProvider: any =
|
||||||
})
|
})
|
||||||
export class NgFormModel extends ControlContainer implements Form,
|
export class NgFormModel extends ControlContainer implements Form,
|
||||||
OnChanges {
|
OnChanges {
|
||||||
|
private _submitted: boolean = false;
|
||||||
|
|
||||||
form: ControlGroup = null;
|
form: ControlGroup = null;
|
||||||
directives: NgControl[] = [];
|
directives: NgControl[] = [];
|
||||||
ngSubmit = new EventEmitter();
|
ngSubmit = new EventEmitter();
|
||||||
|
@ -131,6 +133,8 @@ export class NgFormModel extends ControlContainer implements Form,
|
||||||
this._updateDomValue();
|
this._updateDomValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get submitted(): boolean { return this._submitted; }
|
||||||
|
|
||||||
get formDirective(): Form { return this; }
|
get formDirective(): Form { return this; }
|
||||||
|
|
||||||
get control(): ControlGroup { return this.form; }
|
get control(): ControlGroup { return this.form; }
|
||||||
|
@ -166,6 +170,7 @@ export class NgFormModel extends ControlContainer implements Form,
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit(): boolean {
|
onSubmit(): boolean {
|
||||||
|
this._submitted = true;
|
||||||
ObservableWrapper.callEmit(this.ngSubmit, null);
|
ObservableWrapper.callEmit(this.ngSubmit, null);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -145,6 +145,55 @@ export function main() {
|
||||||
expect(fixture.debugElement.componentInstance.name).toEqual('updated');
|
expect(fixture.debugElement.componentInstance.name).toEqual('updated');
|
||||||
})));
|
})));
|
||||||
|
|
||||||
|
it("should mark NgForm as submitted on submit event",
|
||||||
|
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
|
||||||
|
var t = `<div>
|
||||||
|
<form #f="ngForm" (ngSubmit)="data=f.submitted"></form>
|
||||||
|
<span>{{data}}</span>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
var fixture: ComponentFixture<MyComp8>;
|
||||||
|
|
||||||
|
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then(
|
||||||
|
(root) => { fixture = root; });
|
||||||
|
tick();
|
||||||
|
|
||||||
|
fixture.debugElement.componentInstance.data = false;
|
||||||
|
|
||||||
|
tick();
|
||||||
|
|
||||||
|
var form = fixture.debugElement.query(By.css("form"));
|
||||||
|
dispatchEvent(form.nativeElement, "submit");
|
||||||
|
|
||||||
|
tick();
|
||||||
|
expect(fixture.debugElement.componentInstance.data).toEqual(true);
|
||||||
|
})));
|
||||||
|
|
||||||
|
it("should mark NgFormModel as submitted on submit event",
|
||||||
|
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
|
||||||
|
var t = `<div>
|
||||||
|
<form #f="ngForm" [ngFormModel]="form" (ngSubmit)="data=f.submitted"></form>
|
||||||
|
<span>{{data}}</span>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
var fixture: ComponentFixture<MyComp8>;
|
||||||
|
|
||||||
|
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then(
|
||||||
|
(root) => { fixture = root; });
|
||||||
|
tick();
|
||||||
|
|
||||||
|
fixture.debugElement.componentInstance.form = new ControlGroup({});
|
||||||
|
fixture.debugElement.componentInstance.data = false;
|
||||||
|
|
||||||
|
tick();
|
||||||
|
|
||||||
|
var form = fixture.debugElement.query(By.css("form"));
|
||||||
|
dispatchEvent(form.nativeElement, "submit");
|
||||||
|
|
||||||
|
tick();
|
||||||
|
expect(fixture.debugElement.componentInstance.data).toEqual(true);
|
||||||
|
})));
|
||||||
|
|
||||||
it("should work with single controls",
|
it("should work with single controls",
|
||||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||||
var control = new Control("loginValue");
|
var control = new Control("loginValue");
|
||||||
|
|
|
@ -801,6 +801,7 @@ const COMMON = [
|
||||||
'NgForm.path:string[]',
|
'NgForm.path:string[]',
|
||||||
'NgForm.removeControl(dir:NgControl):void',
|
'NgForm.removeControl(dir:NgControl):void',
|
||||||
'NgForm.removeControlGroup(dir:NgControlGroup):void',
|
'NgForm.removeControlGroup(dir:NgControlGroup):void',
|
||||||
|
'NgForm.submitted:boolean',
|
||||||
'NgForm.updateModel(dir:NgControl, value:any):void',
|
'NgForm.updateModel(dir:NgControl, value:any):void',
|
||||||
'NgFormControl',
|
'NgFormControl',
|
||||||
'NgFormControl.asyncValidator:AsyncValidatorFn',
|
'NgFormControl.asyncValidator:AsyncValidatorFn',
|
||||||
|
@ -830,6 +831,7 @@ const COMMON = [
|
||||||
'NgFormModel.path:string[]',
|
'NgFormModel.path:string[]',
|
||||||
'NgFormModel.removeControl(dir:NgControl):void',
|
'NgFormModel.removeControl(dir:NgControl):void',
|
||||||
'NgFormModel.removeControlGroup(dir:NgControlGroup):any',
|
'NgFormModel.removeControlGroup(dir:NgControlGroup):any',
|
||||||
|
'NgFormModel.submitted:boolean',
|
||||||
'NgFormModel.updateModel(dir:NgControl, value:any):void',
|
'NgFormModel.updateModel(dir:NgControl, value:any):void',
|
||||||
'NgIf',
|
'NgIf',
|
||||||
'NgIf.constructor(_viewContainer:ViewContainerRef, _templateRef:TemplateRef<Object>)',
|
'NgIf.constructor(_viewContainer:ViewContainerRef, _templateRef:TemplateRef<Object>)',
|
||||||
|
|
Loading…
Reference in New Issue