iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form submit event (#11989)

Browse Source 
* feat(forms): ngSubmit event exposes $event from original submit event as local variable

Modify NgForm directive and FormGroup directive to expose the original submit event as $event in the ngSubmit event. Modify docs to reflect changes.

This resolves #10920.

* refactor: code cleanup
This commit is contained in:
Connor Wyatt
2016-10-11 23:49:36 +01:00
committed by Tobias Bosch
parent 5effc330ed
commit 17e3410d98
5 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/@angular/forms/src/directives/ng_form.ts
+10 -9
View File
@@ -48,7 +48,8 @@ const resolvedPromise = Promise.resolve(null);
* sub-groups within the form.
*
* You can listen to the directive's `ngSubmit` event to be notified when the user has
* triggered a form submission.
* triggered a form submission. The `ngSubmit` event will be emitted with the original form
* submission event.
*
* {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
*
@@ -61,7 +62,7 @@ const resolvedPromise = Promise.resolve(null);
@Directive({
selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
providers: [formDirectiveProvider],
host: {'(submit)': 'onSubmit()', '(reset)': 'onReset()'},
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
outputs: ['ngSubmit'],
exportAs: 'ngForm'
})
@@ -102,7 +103,7 @@ export class NgForm extends ControlContainer implements Form {
removeControl(dir: NgModel): void {
resolvedPromise.then(() => {
var container = this._findContainer(dir.path);
const container = this._findContainer(dir.path);
if (isPresent(container)) {
container.removeControl(dir.name);
}
@@ -111,8 +112,8 @@ export class NgForm extends ControlContainer implements Form {
addFormGroup(dir: NgModelGroup): void {
resolvedPromise.then(() => {
var container = this._findContainer(dir.path);
var group = new FormGroup({});
const container = this._findContainer(dir.path);
const group = new FormGroup({});
setUpFormContainer(group, dir);
container.registerControl(dir.name, group);
group.updateValueAndValidity({emitEvent: false});
@@ -121,7 +122,7 @@ export class NgForm extends ControlContainer implements Form {
removeFormGroup(dir: NgModelGroup): void {
resolvedPromise.then(() => {
var container = this._findContainer(dir.path);
const container = this._findContainer(dir.path);
if (isPresent(container)) {
container.removeControl(dir.name);
}
@@ -132,16 +133,16 @@ export class NgForm extends ControlContainer implements Form {
updateModel(dir: NgControl, value: any): void {
resolvedPromise.then(() => {
var ctrl = <FormControl>this.form.get(dir.path);
const ctrl = <FormControl>this.form.get(dir.path);
ctrl.setValue(value);
});
}
setValue(value: {[key: string]: any}): void { this.control.setValue(value); }
onSubmit(): boolean {
onSubmit($event: Event): boolean {
this._submitted = true;
this.ngSubmit.emit(null);
this.ngSubmit.emit($event);
return false;
}
modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts
+10 -6
View File
@@ -44,6 +44,10 @@ export const formDirectiveProvider: any = {
* its {@link AbstractControl.statusChanges} event to be notified when the validation status is
* re-calculated.
*
* Furthermore, you can listen to the directive's `ngSubmit` event to be notified when the user has
* triggered a form submission. The `ngSubmit` event will be emitted with the original form
* submission event.
*
* ### Example
*
* In this example, we create form controls for first name and last name.
@@ -59,7 +63,7 @@ export const formDirectiveProvider: any = {
@Directive({
selector: '[formGroup]',
providers: [formDirectiveProvider],
host: {'(submit)': 'onSubmit()', '(reset)': 'onReset()'},
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
exportAs: 'ngForm'
})
export class FormGroupDirective extends ControlContainer implements Form,
@@ -107,7 +111,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
removeControl(dir: FormControlName): void { ListWrapper.remove(this.directives, dir); }
addFormGroup(dir: FormGroupName): void {
var ctrl: any = this.form.get(dir.path);
const ctrl: any = this.form.get(dir.path);
setUpFormContainer(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
}
@@ -117,7 +121,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
getFormGroup(dir: FormGroupName): FormGroup { return <FormGroup>this.form.get(dir.path); }
addFormArray(dir: FormArrayName): void {
var ctrl: any = this.form.get(dir.path);
const ctrl: any = this.form.get(dir.path);
setUpFormContainer(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
}
@@ -127,13 +131,13 @@ export class FormGroupDirective extends ControlContainer implements Form,
getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.get(dir.path); }
updateModel(dir: FormControlName, value: any): void {
var ctrl  = <FormControl>this.form.get(dir.path);
const ctrl  = <FormControl>this.form.get(dir.path);
ctrl.setValue(value);
}
onSubmit(): boolean {
onSubmit($event: Event): boolean {
this._submitted = true;
this.ngSubmit.emit(null);
this.ngSubmit.emit($event);
return false;
}