honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(forms): allow both patching and strict setting of values (#10537)

Browse Source
This commit is contained in:
Kara
2016-08-05 13:35:17 -07:00
committed by Alex Rickabaugh
parent c586656d43
commit fcafdff10b
10 changed files with 503 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/@angular/forms/src/directives/ng_form.ts
+6 -6
View File
@@ -127,7 +127,7 @@ export class NgForm extends ControlContainer implements Form {
});
}
getControl(dir: NgModel): FormControl { return <FormControl>this.form.find(dir.path); }
getControl(dir: NgModel): FormControl { return <FormControl>this.form.get(dir.path); }
removeControl(dir: NgModel): void {
resolvedPromise.then(() => {
@@ -157,16 +157,16 @@ export class NgForm extends ControlContainer implements Form {
});
}
getFormGroup(dir: NgModelGroup): FormGroup { return <FormGroup>this.form.find(dir.path); }
getFormGroup(dir: NgModelGroup): FormGroup { return <FormGroup>this.form.get(dir.path); }
updateModel(dir: NgControl, value: any): void {
resolvedPromise.then(() => {
var ctrl = <FormControl>this.form.find(dir.path);
ctrl.updateValue(value);
var ctrl = <FormControl>this.form.get(dir.path);
ctrl.setValue(value);
});
}
updateValue(value: {[key: string]: any}): void { this.control.updateValue(value); }
setValue(value: {[key: string]: any}): void { this.control.setValue(value); }
onSubmit(): boolean {
this._submitted = true;
@@ -179,6 +179,6 @@ export class NgForm extends ControlContainer implements Form {
/** @internal */
_findContainer(path: string[]): FormGroup {
path.pop();
return ListWrapper.isEmpty(path) ? this.form : <FormGroup>this.form.find(path);
return ListWrapper.isEmpty(path) ? this.form : <FormGroup>this.form.get(path);
}
}
modules/@angular/forms/src/directives/ng_model.ts
+1 -1
View File
@@ -152,6 +152,6 @@ export class NgModel extends NgControl implements OnChanges,
private _updateValue(value: any): void {
resolvedPromise.then(
() => { this.control.updateValue(value, {emitViewToModelChange: false}); });
() => { this.control.setValue(value, {emitViewToModelChange: false}); });
}
}
modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts
+1 -1
View File
@@ -93,7 +93,7 @@ export class FormControlDirective extends NgControl implements OnChanges {
this.form.updateValueAndValidity({emitEvent: false});
}
if (isPropertyUpdated(changes, this.viewModel)) {
this.form.updateValue(this.model);
this.form.setValue(this.model);
this.viewModel = this.model;
}
}
modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts
+9 -9
View File
@@ -145,39 +145,39 @@ export class FormGroupDirective extends ControlContainer implements Form,
get path(): string[] { return []; }
addControl(dir: NgControl): void {
const ctrl: any = this.form.find(dir.path);
const ctrl: any = this.form.get(dir.path);
setUpControl(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
this.directives.push(dir);
}
getControl(dir: NgControl): FormControl { return <FormControl>this.form.find(dir.path); }
getControl(dir: NgControl): FormControl { return <FormControl>this.form.get(dir.path); }
removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); }
addFormGroup(dir: FormGroupName): void {
var ctrl: any = this.form.find(dir.path);
var ctrl: any = this.form.get(dir.path);
setUpFormContainer(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
}
removeFormGroup(dir: FormGroupName): void {}
getFormGroup(dir: FormGroupName): FormGroup { return <FormGroup>this.form.find(dir.path); }
getFormGroup(dir: FormGroupName): FormGroup { return <FormGroup>this.form.get(dir.path); }
addFormArray(dir: FormArrayName): void {
var ctrl: any = this.form.find(dir.path);
var ctrl: any = this.form.get(dir.path);
setUpFormContainer(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
}
removeFormArray(dir: FormArrayName): void {}
getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.find(dir.path); }
getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.get(dir.path); }
updateModel(dir: NgControl, value: any): void {
var ctrl  = <FormControl>this.form.find(dir.path);
ctrl.updateValue(value);
var ctrl  = <FormControl>this.form.get(dir.path);
ctrl.setValue(value);
}
onSubmit(): boolean {
@@ -191,7 +191,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
/** @internal */
_updateDomValue() {
this.directives.forEach(dir => {
var ctrl: any = this.form.find(dir.path);
var ctrl: any = this.form.get(dir.path);
dir.valueAccessor.writeValue(ctrl.value);
});
}
modules/@angular/forms/src/directives/shared.ts
+1 -1
View File
@@ -46,7 +46,7 @@ export function setUpControl(control: FormControl, dir: NgControl): void {
dir.valueAccessor.registerOnChange((newValue: any) => {
dir.viewToModelUpdate(newValue);
control.markAsDirty();
control.updateValue(newValue, {emitModelToViewChange: false});
control.setValue(newValue, {emitModelToViewChange: false});
});
control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
modules/@angular/forms/src/model.ts
+84 -7
View File
@@ -177,7 +177,9 @@ export abstract class AbstractControl {
setParent(parent: FormGroup|FormArray): void { this._parent = parent; }
abstract updateValue(value: any, options?: Object): void;
abstract setValue(value: any, options?: Object): void;
abstract patchValue(value: any, options?: Object): void;
abstract reset(value?: any, options?: Object): void;
@@ -401,7 +403,7 @@ export class FormControl extends AbstractControl {
* If `emitViewToModelChange` is `true`, an ngModelChange event will be fired to update the
* model. This is the default behavior if `emitViewToModelChange` is not specified.
*/
updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}: {
setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
@@ -417,10 +419,35 @@ export class FormControl extends AbstractControl {
this.updateValueAndValidity({onlySelf: onlySelf, emitEvent: emitEvent});
}
/**
* This function is functionally the same as updateValue() at this level. It exists for
* symmetry with patchValue() on FormGroups and FormArrays, where it does behave differently.
*/
patchValue(value: any, options: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
this.setValue(value, options);
}
/**
* @deprecated Please use setValue() instead.
*/
updateValue(value: any, options: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
this.setValue(value, options);
}
reset(value: any = null, {onlySelf}: {onlySelf?: boolean} = {}): void {
this.markAsPristine({onlySelf: onlySelf});
this.markAsUntouched({onlySelf: onlySelf});
this.updateValue(value, {onlySelf: onlySelf});
this.setValue(value, {onlySelf: onlySelf});
}
/**
@@ -523,10 +550,20 @@ export class FormGroup extends AbstractControl {
return c && this._included(controlName);
}
updateValue(value: {[key: string]: any}, {onlySelf}: {onlySelf?: boolean} = {}): void {
setValue(value: {[key: string]: any}, {onlySelf}: {onlySelf?: boolean} = {}): void {
this._checkAllValuesPresent(value);
StringMapWrapper.forEach(value, (newValue: any, name: string) => {
this._throwIfControlMissing(name);
this.controls[name].updateValue(newValue, {onlySelf: true});
this.controls[name].setValue(newValue, {onlySelf: true});
});
this.updateValueAndValidity({onlySelf: onlySelf});
}
patchValue(value: {[key: string]: any}, {onlySelf}: {onlySelf?: boolean} = {}): void {
StringMapWrapper.forEach(value, (newValue: any, name: string) => {
if (this.controls[name]) {
this.controls[name].patchValue(newValue, {onlySelf: true});
}
});
this.updateValueAndValidity({onlySelf: onlySelf});
}
@@ -542,6 +579,12 @@ export class FormGroup extends AbstractControl {
/** @internal */
_throwIfControlMissing(name: string): void {
if (!Object.keys(this.controls).length) {
throw new BaseException(`
There are no form controls registered with this group yet. If you're using ngModel,
you may want to check next tick (e.g. use setTimeout).
`);
}
if (!this.controls[name]) {
throw new BaseException(`Cannot find form control with name: ${name}.`);
}
@@ -594,6 +637,15 @@ export class FormGroup extends AbstractControl {
var isOptional = StringMapWrapper.contains(this._optionals, controlName);
return !isOptional || StringMapWrapper.get(this._optionals, controlName);
}
/** @internal */
_checkAllValuesPresent(value: any): void {
this._forEachChild((control: AbstractControl, name: string) => {
if (value[name] === undefined) {
throw new BaseException(`Must supply a value for form control with name: '${name}'.`);
}
});
}
}
/**
@@ -666,10 +718,20 @@ export class FormArray extends AbstractControl {
*/
get length(): number { return this.controls.length; }
updateValue(value: any[], {onlySelf}: {onlySelf?: boolean} = {}): void {
setValue(value: any[], {onlySelf}: {onlySelf?: boolean} = {}): void {
this._checkAllValuesPresent(value);
value.forEach((newValue: any, index: number) => {
this._throwIfControlMissing(index);
this.at(index).updateValue(newValue, {onlySelf: true});
this.at(index).setValue(newValue, {onlySelf: true});
});
this.updateValueAndValidity({onlySelf: onlySelf});
}
patchValue(value: any[], {onlySelf}: {onlySelf?: boolean} = {}): void {
value.forEach((newValue: any, index: number) => {
if (this.at(index)) {
this.at(index).patchValue(newValue, {onlySelf: true});
}
});
this.updateValueAndValidity({onlySelf: onlySelf});
}
@@ -685,6 +747,12 @@ export class FormArray extends AbstractControl {
/** @internal */
_throwIfControlMissing(index: number): void {
if (!this.controls.length) {
throw new BaseException(`
There are no form controls registered with this array yet. If you're using ngModel,
you may want to check next tick (e.g. use setTimeout).
`);
}
if (!this.at(index)) {
throw new BaseException(`Cannot find form control at index ${index}`);
}
@@ -707,4 +775,13 @@ export class FormArray extends AbstractControl {
_setParentForControls(): void {
this._forEachChild((control: AbstractControl) => { control.setParent(this); });
}
/** @internal */
_checkAllValuesPresent(value: any): void {
this._forEachChild((control: AbstractControl, i: number) => {
if (value[i] === undefined) {
throw new BaseException(`Must supply a value for form control at index: ${i}.`);
}
});
}
}
modules/@angular/forms/test/directives_spec.ts
+12 -12
View File
@@ -193,7 +193,7 @@ export function main() {
expect(formModel.hasError('required', ['login'])).toBe(true);
expect(formModel.hasError('async', ['login'])).toBe(false);
(<FormControl>formModel.find(['login'])).updateValue('invalid value');
(<FormControl>formModel.get('login')).setValue('invalid value');
// sync validator passes, running async validators
expect(formModel.pending).toBe(true);
@@ -205,7 +205,7 @@ export function main() {
}));
it('should write value to the DOM', () => {
(<FormControl>formModel.find(['login'])).updateValue('initValue');
(<FormControl>formModel.get(['login'])).setValue('initValue');
form.addControl(loginControlDir);
@@ -233,17 +233,17 @@ export function main() {
group.name = 'passwords';
form.addFormGroup(group);
(<FormControl>formModel.find(['passwords', 'password'])).updateValue('somePassword');
(<FormControl>formModel.find([
(<FormControl>formModel.get(['passwords', 'password'])).setValue('somePassword');
(<FormControl>formModel.get([
'passwords', 'passwordConfirm'
])).updateValue('someOtherPassword');
])).setValue('someOtherPassword');
// sync validators are set
expect(formModel.hasError('differentPasswords', ['passwords'])).toEqual(true);
(<FormControl>formModel.find([
(<FormControl>formModel.get([
'passwords', 'passwordConfirm'
])).updateValue('somePassword');
])).setValue('somePassword');
// sync validators pass, running async validators
expect(formModel.pending).toBe(true);
@@ -266,7 +266,7 @@ export function main() {
it('should update dom values of all the directives', () => {
form.addControl(loginControlDir);
(<FormControl>formModel.find(['login'])).updateValue('new value');
(<FormControl>formModel.get(['login'])).setValue('new value');
form.ngOnChanges({});
@@ -334,7 +334,7 @@ export function main() {
flushMicrotasks();
expect(formModel.find(['person', 'login'])).not.toBeNull;
expect(formModel.get(['person', 'login'])).not.toBeNull;
}));
// should update the form's value and validity
@@ -350,8 +350,8 @@ export function main() {
flushMicrotasks();
expect(formModel.find(['person'])).toBeNull();
expect(formModel.find(['person', 'login'])).toBeNull();
expect(formModel.get(['person'])).toBeNull();
expect(formModel.get(['person', 'login'])).toBeNull();
}));
// should update the form's value and validity
@@ -524,7 +524,7 @@ export function main() {
expect(ngModel.control.errors).toEqual({'required': true});
ngModel.control.updateValue('someValue');
ngModel.control.setValue('someValue');
tick();
expect(ngModel.control.errors).toEqual({'async': true});
modules/@angular/forms/test/model_spec.ts
+357 -97
View File
File diff suppressed because it is too large Load Diff
modules/@angular/forms/test/reactive_integration_spec.ts
+5 -5
View File
@@ -198,7 +198,7 @@ export function main() {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
login.updateValue('newValue');
login.setValue('newValue');
fixture.detectChanges();
@@ -276,7 +276,7 @@ export function main() {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
login.updateValue('new value');
login.setValue('new value');
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
expect(loginEl.value).toBe('new value');
@@ -302,7 +302,7 @@ export function main() {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
login.updateValue('new value');
login.setValue('new value');
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
expect(loginEl.value).toBe('new value');
@@ -654,7 +654,7 @@ export function main() {
expect(value.food).toEqual('chicken');
expect(inputs[1].nativeElement.checked).toEqual(false);
ctrl.updateValue('fish');
ctrl.setValue('fish');
fixture.detectChanges();
expect(inputs[0].nativeElement.checked).toEqual(false);
@@ -698,7 +698,7 @@ export function main() {
expect(inputs[2].nativeElement.checked).toEqual(false);
expect(inputs[3].nativeElement.checked).toEqual(true);
drinkCtrl.updateValue('cola');
drinkCtrl.setValue('cola');
fixture.detectChanges();
expect(inputs[0].nativeElement.checked).toEqual(true);
tools/public_api_guard/forms/index.d.ts
Vendored
+27 -6
View File
@@ -39,6 +39,7 @@ export declare abstract class AbstractControl {
markAsUntouched({onlySelf}?: {
onlySelf?: boolean;
}): void;
abstract patchValue(value: any, options?: Object): void;
abstract reset(value?: any, options?: Object): void;
setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[]): void;
setErrors(errors: {
@@ -48,7 +49,7 @@ export declare abstract class AbstractControl {
}): void;
setParent(parent: FormGroup | FormArray): void;
setValidators(newValidator: ValidatorFn | ValidatorFn[]): void;
abstract updateValue(value: any, options?: Object): void;
abstract setValue(value: any, options?: Object): void;
updateValueAndValidity({onlySelf, emitEvent}?: {
onlySelf?: boolean;
emitEvent?: boolean;
@@ -152,12 +153,15 @@ export declare class FormArray extends AbstractControl {
constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn);
at(index: number): AbstractControl;
insert(index: number, control: AbstractControl): void;
patchValue(value: any[], {onlySelf}?: {
onlySelf?: boolean;
}): void;
push(control: AbstractControl): void;
removeAt(index: number): void;
reset(value?: any, {onlySelf}?: {
onlySelf?: boolean;
}): void;
updateValue(value: any[], {onlySelf}?: {
setValue(value: any[], {onlySelf}?: {
onlySelf?: boolean;
}): void;
}
@@ -189,11 +193,23 @@ export declare class FormBuilder {
/** @experimental */
export declare class FormControl extends AbstractControl {
constructor(value?: any, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]);
patchValue(value: any, options?: {
onlySelf?: boolean;
emitEvent?: boolean;
emitModelToViewChange?: boolean;
emitViewToModelChange?: boolean;
}): void;
registerOnChange(fn: Function): void;
reset(value?: any, {onlySelf}?: {
onlySelf?: boolean;
}): void;
updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {
setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {
onlySelf?: boolean;
emitEvent?: boolean;
emitModelToViewChange?: boolean;
emitViewToModelChange?: boolean;
}): void;
/** @deprecated */ updateValue(value: any, options?: {
onlySelf?: boolean;
emitEvent?: boolean;
emitModelToViewChange?: boolean;
@@ -246,12 +262,17 @@ export declare class FormGroup extends AbstractControl {
contains(controlName: string): boolean;
exclude(controlName: string): void;
include(controlName: string): void;
patchValue(value: {
[key: string]: any;
}, {onlySelf}?: {
onlySelf?: boolean;
}): void;
registerControl(name: string, control: AbstractControl): AbstractControl;
removeControl(name: string): void;
reset(value?: any, {onlySelf}?: {
onlySelf?: boolean;
}): void;
updateValue(value: {
setValue(value: {
[key: string]: any;
}, {onlySelf}?: {
onlySelf?: boolean;
@@ -358,10 +379,10 @@ export declare class NgForm extends ControlContainer implements Form {
onSubmit(): boolean;
removeControl(dir: NgModel): void;
removeFormGroup(dir: NgModelGroup): void;
updateModel(dir: NgControl, value: any): void;
updateValue(value: {
setValue(value: {
[key: string]: any;
}): void;
updateModel(dir: NgControl, value: any): void;
}
/** @experimental */