cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(forms): support rebinding nested controls (#11210)

Browse Source
This commit is contained in:
Kara
2016-09-02 15:57:35 -07:00
committed by Martin Probst
parent d309f7799c
commit 8c09933803
8 changed files with 277 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts
View File

@ -96,9 +96,11 @@ export const controlNameBinding: any = {
*/
@Directive({selector: '[formControlName]', providers: [controlNameBinding]})
export class FormControlName extends NgControl implements OnChanges, OnDestroy {
private _added = false;
/** @internal */
viewModel: any;
private _added = false;
/** @internal */
_control: FormControl;
@Input('formControlName') name: string;
@ -122,12 +124,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
}
ngOnChanges(changes: SimpleChanges) {
if (!this._added) {
this._checkParentType();
this.formDirective.addControl(this);
if (this.control.disabled) this.valueAccessor.setDisabledState(true);
this._added = true;
}
if (!this._added) this._setUpControl();
if (isPropertyUpdated(changes, this.viewModel)) {
this.viewModel = this.model;
this.formDirective.updateModel(this, this.model);
@ -155,7 +152,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
return composeAsyncValidators(this._rawAsyncValidators);
}
get control(): FormControl { return this.formDirective.getControl(this); }
get control(): FormControl { return this._control; }
private _checkParentType(): void {
if (!(this._parent instanceof FormGroupName) &&
@ -167,4 +164,11 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
ReactiveErrors.controlParentException();
}
}
private _setUpControl() {
this._checkParentType();
this._control = this.formDirective.addControl(this);
if (this.control.disabled) this.valueAccessor.setDisabledState(true);
this._added = true;
}
}

47
modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts
View File

@ -15,10 +15,10 @@ import {FormArray, FormControl, FormGroup} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
import {ControlContainer} from '../control_container';
import {Form} from '../form_interface';
import {NgControl} from '../ng_control';
import {ReactiveErrors} from '../reactive_errors';
import {cleanUpControl, composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer} from '../shared';
import {FormControlName} from './form_control_name';
import {FormArrayName, FormGroupName} from './form_group_name';
export const formDirectiveProvider: any = {
@ -105,7 +105,8 @@ export const formDirectiveProvider: any = {
export class FormGroupDirective extends ControlContainer implements Form,
OnChanges {
private _submitted: boolean = false;
directives: NgControl[] = [];
private _oldForm: FormGroup;
directives: FormControlName[] = [];
@Input('formGroup') form: FormGroup = null;
@Output() ngSubmit = new EventEmitter();
@ -119,12 +120,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
ngOnChanges(changes: SimpleChanges): void {
this._checkFormPresent();
if (StringMapWrapper.contains(changes, 'form')) {
var sync = composeValidators(this._validators);
this.form.validator = Validators.compose([this.form.validator, sync]);
var async = composeAsyncValidators(this._asyncValidators);
this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
this._updateDomValue(changes);
this._updateValidators();
this._updateDomValue();
this._updateRegistrations();
}
}
@ -136,16 +134,17 @@ export class FormGroupDirective extends ControlContainer implements Form,
get path(): string[] { return []; }
addControl(dir: NgControl): void {
addControl(dir: FormControlName): FormControl {
const ctrl: any = this.form.get(dir.path);
setUpControl(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
this.directives.push(dir);
return ctrl;
}
getControl(dir: NgControl): FormControl { return <FormControl>this.form.get(dir.path); }
getControl(dir: FormControlName): FormControl { return <FormControl>this.form.get(dir.path); }
removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); }
removeControl(dir: FormControlName): void { ListWrapper.remove(this.directives, dir); }
addFormGroup(dir: FormGroupName): void {
var ctrl: any = this.form.get(dir.path);
@ -167,7 +166,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.get(dir.path); }
updateModel(dir: NgControl, value: any): void {
updateModel(dir: FormControlName, value: any): void {
var ctrl  = <FormControl>this.form.get(dir.path);
ctrl.setValue(value);
}
@ -186,21 +185,33 @@ export class FormGroupDirective extends ControlContainer implements Form,
}
/** @internal */
_updateDomValue(changes: SimpleChanges) {
const oldForm = changes['form'].previousValue;
_updateDomValue() {
this.directives.forEach(dir => {
const newCtrl: any = this.form.get(dir.path);
const oldCtrl = oldForm.get(dir.path);
if (oldCtrl !== newCtrl) {
cleanUpControl(oldCtrl, dir);
if (dir._control !== newCtrl) {
cleanUpControl(dir._control, dir);
if (newCtrl) setUpControl(newCtrl, dir);
dir._control = newCtrl;
}
});
this.form._updateTreeValidity({emitEvent: false});
}
private _updateRegistrations() {
this.form._registerOnCollectionChange(() => this._updateDomValue());
if (this._oldForm) this._oldForm._registerOnCollectionChange(() => {});
this._oldForm = this.form;
}
private _updateValidators() {
const sync = composeValidators(this._validators);
this.form.validator = Validators.compose([this.form.validator, sync]);
const async = composeAsyncValidators(this._asyncValidators);
this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
}
private _checkFormPresent() {
if (isBlank(this.form)) {
ReactiveErrors.missingFormException();

65
modules/@angular/forms/src/model.ts
View File

@ -81,6 +81,8 @@ function coerceToAsyncValidator(asyncValidator: AsyncValidatorFn | AsyncValidato
export abstract class AbstractControl {
/** @internal */
_value: any;
/** @internal */
_onCollectionChange = () => {};
private _valueChanges: EventEmitter<any>;
private _statusChanges: EventEmitter<any>;
@ -420,6 +422,9 @@ export abstract class AbstractControl {
return isStringMap(formState) && Object.keys(formState).length === 2 && 'value' in formState &&
'disabled' in formState;
}
/** @internal */
_registerOnCollectionChange(fn: () => void): void { this._onCollectionChange = fn; }
}
/**
@ -530,6 +535,7 @@ export class FormControl extends AbstractControl {
_clearChangeFns(): void {
this._onChange = [];
this._onDisabledChange = null;
this._onCollectionChange = () => {};
}
/**
@ -574,7 +580,7 @@ export class FormGroup extends AbstractControl {
asyncValidator: AsyncValidatorFn = null) {
super(validator, asyncValidator);
this._initObservables();
this._setParentForControls();
this._setUpControls();
this.updateValueAndValidity({onlySelf: true, emitEvent: false});
}
@ -585,6 +591,7 @@ export class FormGroup extends AbstractControl {
if (this.controls[name]) return this.controls[name];
this.controls[name] = control;
control.setParent(this);
control._registerOnCollectionChange(this._onCollectionChange);
return control;
}
@ -594,14 +601,28 @@ export class FormGroup extends AbstractControl {
addControl(name: string, control: AbstractControl): void {
this.registerControl(name, control);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
* Remove a control from this group.
*/
removeControl(name: string): void {
if (this.controls[name]) this.controls[name]._registerOnCollectionChange(() => {});
StringMapWrapper.delete(this.controls, name);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
* Replace an existing control.
*/
setControl(name: string, control: AbstractControl): void {
if (this.controls[name]) this.controls[name]._registerOnCollectionChange(() => {});
StringMapWrapper.delete(this.controls, name);
if (control) this.registerControl(name, control);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
@ -666,8 +687,11 @@ export class FormGroup extends AbstractControl {
}
/** @internal */
_setParentForControls() {
this._forEachChild((control: AbstractControl, name: string) => { control.setParent(this); });
_setUpControls() {
this._forEachChild((control: AbstractControl) => {
control.setParent(this);
control._registerOnCollectionChange(this._onCollectionChange);
});
}
/** @internal */
@ -750,7 +774,7 @@ export class FormArray extends AbstractControl {
asyncValidator: AsyncValidatorFn = null) {
super(validator, asyncValidator);
this._initObservables();
this._setParentForControls();
this._setUpControls();
this.updateValueAndValidity({onlySelf: true, emitEvent: false});
}
@ -764,8 +788,9 @@ export class FormArray extends AbstractControl {
*/
push(control: AbstractControl): void {
this.controls.push(control);
control.setParent(this);
this._registerControl(control);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
@ -773,16 +798,35 @@ export class FormArray extends AbstractControl {
*/
insert(index: number, control: AbstractControl): void {
ListWrapper.insert(this.controls, index, control);
control.setParent(this);
this._registerControl(control);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
* Remove the control at the given `index` in the array.
*/
removeAt(index: number): void {
if (this.controls[index]) this.controls[index]._registerOnCollectionChange(() => {});
ListWrapper.removeAt(this.controls, index);
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
* Replace an existing control.
*/
setControl(index: number, control: AbstractControl): void {
if (this.controls[index]) this.controls[index]._registerOnCollectionChange(() => {});
ListWrapper.removeAt(this.controls, index);
if (control) {
ListWrapper.insert(this.controls, index, control);
this._registerControl(control);
}
this.updateValueAndValidity();
this._onCollectionChange();
}
/**
@ -849,8 +893,8 @@ export class FormArray extends AbstractControl {
}
/** @internal */
_setParentForControls(): void {
this._forEachChild((control: AbstractControl) => { control.setParent(this); });
_setUpControls(): void {
this._forEachChild((control: AbstractControl) => this._registerControl(control));
}
/** @internal */
@ -869,4 +913,9 @@ export class FormArray extends AbstractControl {
}
return !!this.controls.length;
}
private _registerControl(control: AbstractControl) {
control.setParent(this);
control._registerOnCollectionChange(this._onCollectionChange);
}
}