angular-cn/packages/forms/test/directives_spec.ts

685 lines
28 KiB
TypeScript
Raw Normal View History

/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {SimpleChange} from '@angular/core';
import {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
import {AbstractControl, CheckboxControlValueAccessor, ControlValueAccessor, DefaultValueAccessor, FormArray, FormArrayName, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, NgControl, NgForm, NgModel, NgModelGroup, SelectControlValueAccessor, SelectMultipleControlValueAccessor, ValidationErrors, Validator, Validators} from '@angular/forms';
import {composeValidators, selectValueAccessor} from '@angular/forms/src/directives/shared';
import {SpyNgControl, SpyValueAccessor} from './spies';
2016-06-08 18:36:24 -04:00
class DummyControlValueAccessor implements ControlValueAccessor {
2016-06-12 00:23:37 -04:00
writtenValue: any;
2016-06-08 18:36:24 -04:00
registerOnChange(fn: any) {}
registerOnTouched(fn: any) {}
2016-06-08 18:36:24 -04:00
writeValue(obj: any): void { this.writtenValue = obj; }
}
class CustomValidatorDirective implements Validator {
validate(c: FormControl): ValidationErrors { return {'custom': true}; }
2016-06-08 18:36:24 -04:00
}
function asyncValidator(expected: any, timeout = 0) {
return (c: AbstractControl): any => {
let resolve: (result: any) => void = undefined !;
const promise = new Promise(res => { resolve = res; });
const res = c.value != expected ? {'async': true} : null;
2016-06-08 18:36:24 -04:00
if (timeout == 0) {
resolve(res);
2016-06-08 18:36:24 -04:00
} else {
setTimeout(() => { resolve(res); }, timeout);
2016-06-08 18:36:24 -04:00
}
return promise;
2016-06-08 18:36:24 -04:00
};
}
{
describe('Form Directives', () => {
let defaultAccessor: DefaultValueAccessor;
2016-06-08 18:36:24 -04:00
beforeEach(() => { defaultAccessor = new DefaultValueAccessor(null !, null !, null !); });
2016-06-08 18:36:24 -04:00
describe('shared', () => {
describe('selectValueAccessor', () => {
let dir: NgControl;
2016-06-08 18:36:24 -04:00
beforeEach(() => { dir = <any>new SpyNgControl(); });
it('should throw when given an empty array',
2016-06-08 18:36:24 -04:00
() => { expect(() => selectValueAccessor(dir, [])).toThrowError(); });
it('should return the default value accessor when no other provided',
2016-06-08 18:36:24 -04:00
() => { expect(selectValueAccessor(dir, [defaultAccessor])).toEqual(defaultAccessor); });
it('should return checkbox accessor when provided', () => {
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
expect(selectValueAccessor(dir, [
defaultAccessor, checkboxAccessor
])).toEqual(checkboxAccessor);
2016-06-08 18:36:24 -04:00
});
it('should return select accessor when provided', () => {
const selectAccessor = new SelectControlValueAccessor(null !, null !);
expect(selectValueAccessor(dir, [
defaultAccessor, selectAccessor
])).toEqual(selectAccessor);
2016-06-08 18:36:24 -04:00
});
it('should return select multiple accessor when provided', () => {
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
expect(selectValueAccessor(dir, [
defaultAccessor, selectMultipleAccessor
])).toEqual(selectMultipleAccessor);
});
it('should throw when more than one build-in accessor is provided', () => {
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
const selectAccessor = new SelectControlValueAccessor(null !, null !);
2016-06-08 18:36:24 -04:00
expect(() => selectValueAccessor(dir, [checkboxAccessor, selectAccessor])).toThrowError();
});
it('should return custom accessor when provided', () => {
const customAccessor = new SpyValueAccessor();
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
2016-06-08 18:36:24 -04:00
expect(selectValueAccessor(dir, <any>[defaultAccessor, customAccessor, checkboxAccessor]))
.toEqual(customAccessor);
});
it('should return custom accessor when provided with select multiple', () => {
const customAccessor = new SpyValueAccessor();
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
expect(selectValueAccessor(
dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
.toEqual(customAccessor);
});
it('should throw when more than one custom accessor is provided', () => {
const customAccessor: ControlValueAccessor = <any>new SpyValueAccessor();
2016-06-08 18:36:24 -04:00
expect(() => selectValueAccessor(dir, [customAccessor, customAccessor])).toThrowError();
});
});
describe('composeValidators', () => {
it('should compose functions', () => {
const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
const dummy2 = (_: any /** TODO #9100 */) => ({'dummy2': true});
const v = composeValidators([dummy1, dummy2]) !;
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'dummy2': true});
2016-06-08 18:36:24 -04:00
});
it('should compose validator directives', () => {
const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
const v = composeValidators([dummy1, new CustomValidatorDirective()]) !;
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'custom': true});
2016-06-08 18:36:24 -04:00
});
});
});
describe('formGroup', () => {
let form: FormGroupDirective;
let formModel: FormGroup;
let loginControlDir: FormControlName;
2016-06-08 18:36:24 -04:00
beforeEach(() => {
form = new FormGroupDirective([], []);
formModel = new FormGroup({
'login': new FormControl(),
'passwords': new FormGroup(
{'password': new FormControl(), 'passwordConfirm': new FormControl()})
2016-06-08 18:36:24 -04:00
});
form.form = formModel;
loginControlDir = new FormControlName(
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
form, [Validators.required], [asyncValidator('expected')], [defaultAccessor], null);
loginControlDir.name = 'login';
2016-06-08 18:36:24 -04:00
loginControlDir.valueAccessor = new DummyControlValueAccessor();
});
it('should reexport control properties', () => {
2016-06-08 18:36:24 -04:00
expect(form.control).toBe(formModel);
expect(form.value).toBe(formModel.value);
expect(form.valid).toBe(formModel.valid);
expect(form.invalid).toBe(formModel.invalid);
expect(form.pending).toBe(formModel.pending);
2016-06-08 18:36:24 -04:00
expect(form.errors).toBe(formModel.errors);
expect(form.pristine).toBe(formModel.pristine);
expect(form.dirty).toBe(formModel.dirty);
expect(form.touched).toBe(formModel.touched);
expect(form.untouched).toBe(formModel.untouched);
expect(form.statusChanges).toBe(formModel.statusChanges);
expect(form.valueChanges).toBe(formModel.valueChanges);
2016-06-08 18:36:24 -04:00
});
it('should reexport control methods', () => {
expect(form.hasError('required')).toBe(formModel.hasError('required'));
expect(form.getError('required')).toBe(formModel.getError('required'));
formModel.setErrors({required: true});
expect(form.hasError('required')).toBe(formModel.hasError('required'));
expect(form.getError('required')).toBe(formModel.getError('required'));
});
describe('addControl', () => {
it('should throw when no control found', () => {
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
const dir = new FormControlName(form, null !, null !, [defaultAccessor], null);
dir.name = 'invalidName';
2016-06-08 18:36:24 -04:00
expect(() => form.addControl(dir))
.toThrowError(new RegExp(`Cannot find control with name: 'invalidName'`));
2016-06-08 18:36:24 -04:00
});
it('should throw for a named control when no value accessor', () => {
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
const dir = new FormControlName(form, null !, null !, null !, null);
dir.name = 'login';
2016-06-08 18:36:24 -04:00
expect(() => form.addControl(dir))
.toThrowError(new RegExp(`No value accessor for form control with name: 'login'`));
});
it('should throw when no value accessor with path', () => {
const group = new FormGroupName(form, null !, null !);
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
const dir = new FormControlName(group, null !, null !, null !, null);
group.name = 'passwords';
dir.name = 'password';
expect(() => form.addControl(dir))
.toThrowError(new RegExp(
`No value accessor for form control with path: 'passwords -> password'`));
2016-06-08 18:36:24 -04:00
});
it('should set up validators', fakeAsync(() => {
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
// sync validators are set
expect(formModel.hasError('required', ['login'])).toBe(true);
expect(formModel.hasError('async', ['login'])).toBe(false);
2016-06-08 18:36:24 -04:00
(<FormControl>formModel.get('login')).setValue('invalid value');
2016-06-08 18:36:24 -04:00
// sync validator passes, running async validators
expect(formModel.pending).toBe(true);
tick();
expect(formModel.hasError('required', ['login'])).toBe(false);
expect(formModel.hasError('async', ['login'])).toBe(true);
2016-06-08 18:36:24 -04:00
}));
it('should write value to the DOM', () => {
(<FormControl>formModel.get(['login'])).setValue('initValue');
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual('initValue');
2016-06-08 18:36:24 -04:00
});
it('should add the directive to the list of directives included in the form', () => {
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
expect(form.directives).toEqual([loginControlDir]);
});
});
describe('addFormGroup', () => {
const matchingPasswordsValidator = (g: FormGroup) => {
if (g.controls['password'].value != g.controls['passwordConfirm'].value) {
return {'differentPasswords': true};
2016-06-08 18:36:24 -04:00
} else {
return null;
}
};
it('should set up validator', fakeAsync(() => {
const group = new FormGroupName(
form, [matchingPasswordsValidator], [asyncValidator('expected')]);
group.name = 'passwords';
form.addFormGroup(group);
2016-06-08 18:36:24 -04:00
(<FormControl>formModel.get(['passwords', 'password'])).setValue('somePassword');
(<FormControl>formModel.get([
'passwords', 'passwordConfirm'
])).setValue('someOtherPassword');
2016-06-08 18:36:24 -04:00
// sync validators are set
expect(formModel.hasError('differentPasswords', ['passwords'])).toEqual(true);
2016-06-08 18:36:24 -04:00
(<FormControl>formModel.get([
'passwords', 'passwordConfirm'
])).setValue('somePassword');
2016-06-08 18:36:24 -04:00
// sync validators pass, running async validators
expect(formModel.pending).toBe(true);
tick();
expect(formModel.hasError('async', ['passwords'])).toBe(true);
2016-06-08 18:36:24 -04:00
}));
});
describe('removeControl', () => {
it('should remove the directive to the list of directives included in the form', () => {
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
form.removeControl(loginControlDir);
expect(form.directives).toEqual([]);
});
});
describe('ngOnChanges', () => {
it('should update dom values of all the directives', () => {
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
(<FormControl>formModel.get(['login'])).setValue('new value');
2016-06-08 18:36:24 -04:00
form.ngOnChanges({});
expect((<any>loginControlDir.valueAccessor).writtenValue).toEqual('new value');
2016-06-08 18:36:24 -04:00
});
it('should set up a sync validator', () => {
const formValidator = (c: AbstractControl) => ({'custom': true});
const f = new FormGroupDirective([formValidator], []);
2016-06-08 18:36:24 -04:00
f.form = formModel;
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
f.ngOnChanges({'form': new SimpleChange(null, null, false)});
2016-06-08 18:36:24 -04:00
expect(formModel.errors).toEqual({'custom': true});
2016-06-08 18:36:24 -04:00
});
it('should set up an async validator', fakeAsync(() => {
const f = new FormGroupDirective([], [asyncValidator('expected')]);
2016-06-08 18:36:24 -04:00
f.form = formModel;
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
f.ngOnChanges({'form': new SimpleChange(null, null, false)});
2016-06-08 18:36:24 -04:00
tick();
expect(formModel.errors).toEqual({'async': true});
2016-06-08 18:36:24 -04:00
}));
});
});
describe('NgForm', () => {
let form: any /** TODO #9100 */;
let formModel: FormGroup;
let loginControlDir: any /** TODO #9100 */;
let personControlGroupDir: any /** TODO #9100 */;
2016-06-08 18:36:24 -04:00
beforeEach(() => {
form = new NgForm([], []);
formModel = form.form;
personControlGroupDir = new NgModelGroup(form, [], []);
personControlGroupDir.name = 'person';
2016-06-08 18:36:24 -04:00
loginControlDir = new NgModel(personControlGroupDir, null !, null !, [defaultAccessor]);
loginControlDir.name = 'login';
2016-06-08 18:36:24 -04:00
loginControlDir.valueAccessor = new DummyControlValueAccessor();
});
it('should reexport control properties', () => {
2016-06-08 18:36:24 -04:00
expect(form.control).toBe(formModel);
expect(form.value).toBe(formModel.value);
expect(form.valid).toBe(formModel.valid);
expect(form.invalid).toBe(formModel.invalid);
expect(form.pending).toBe(formModel.pending);
2016-06-08 18:36:24 -04:00
expect(form.errors).toBe(formModel.errors);
expect(form.pristine).toBe(formModel.pristine);
expect(form.dirty).toBe(formModel.dirty);
expect(form.touched).toBe(formModel.touched);
expect(form.untouched).toBe(formModel.untouched);
expect(form.statusChanges).toBe(formModel.statusChanges);
expect(form.status).toBe(formModel.status);
expect(form.valueChanges).toBe(formModel.valueChanges);
expect(form.disabled).toBe(formModel.disabled);
expect(form.enabled).toBe(formModel.enabled);
2016-06-08 18:36:24 -04:00
});
it('should reexport control methods', () => {
expect(form.hasError('required')).toBe(formModel.hasError('required'));
expect(form.getError('required')).toBe(formModel.getError('required'));
formModel.setErrors({required: true});
expect(form.hasError('required')).toBe(formModel.hasError('required'));
expect(form.getError('required')).toBe(formModel.getError('required'));
});
describe('addControl & addFormGroup', () => {
it('should create a control with the given name', fakeAsync(() => {
form.addFormGroup(personControlGroupDir);
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
flushMicrotasks();
expect(formModel.get(['person', 'login'])).not.toBeNull;
2016-06-08 18:36:24 -04:00
}));
// should update the form's value and validity
});
describe('removeControl & removeFormGroup', () => {
it('should remove control', fakeAsync(() => {
form.addFormGroup(personControlGroupDir);
2016-06-08 18:36:24 -04:00
form.addControl(loginControlDir);
form.removeFormGroup(personControlGroupDir);
2016-06-08 18:36:24 -04:00
form.removeControl(loginControlDir);
flushMicrotasks();
expect(formModel.get(['person'])).toBeNull();
expect(formModel.get(['person', 'login'])).toBeNull();
2016-06-08 18:36:24 -04:00
}));
// should update the form's value and validity
});
it('should set up sync validator', fakeAsync(() => {
const formValidator = (c: any /** TODO #9100 */) => ({'custom': true});
const f = new NgForm([formValidator], []);
2016-06-08 18:36:24 -04:00
tick();
expect(f.form.errors).toEqual({'custom': true});
2016-06-08 18:36:24 -04:00
}));
it('should set up async validator', fakeAsync(() => {
const f = new NgForm([], [asyncValidator('expected')]);
2016-06-08 18:36:24 -04:00
tick();
expect(f.form.errors).toEqual({'async': true});
2016-06-08 18:36:24 -04:00
}));
});
describe('FormGroupName', () => {
let formModel: any /** TODO #9100 */;
let controlGroupDir: any /** TODO #9100 */;
2016-06-08 18:36:24 -04:00
beforeEach(() => {
formModel = new FormGroup({'login': new FormControl(null)});
2016-06-08 18:36:24 -04:00
const parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'group': formModel});
controlGroupDir = new FormGroupName(parent, [], []);
controlGroupDir.name = 'group';
2016-06-08 18:36:24 -04:00
});
it('should reexport control properties', () => {
2016-06-08 18:36:24 -04:00
expect(controlGroupDir.control).toBe(formModel);
expect(controlGroupDir.value).toBe(formModel.value);
expect(controlGroupDir.valid).toBe(formModel.valid);
expect(controlGroupDir.invalid).toBe(formModel.invalid);
expect(controlGroupDir.pending).toBe(formModel.pending);
2016-06-08 18:36:24 -04:00
expect(controlGroupDir.errors).toBe(formModel.errors);
expect(controlGroupDir.pristine).toBe(formModel.pristine);
expect(controlGroupDir.dirty).toBe(formModel.dirty);
expect(controlGroupDir.touched).toBe(formModel.touched);
expect(controlGroupDir.untouched).toBe(formModel.untouched);
expect(controlGroupDir.statusChanges).toBe(formModel.statusChanges);
expect(controlGroupDir.status).toBe(formModel.status);
expect(controlGroupDir.valueChanges).toBe(formModel.valueChanges);
expect(controlGroupDir.disabled).toBe(formModel.disabled);
expect(controlGroupDir.enabled).toBe(formModel.enabled);
2016-06-08 18:36:24 -04:00
});
it('should reexport control methods', () => {
expect(controlGroupDir.hasError('required')).toBe(formModel.hasError('required'));
expect(controlGroupDir.getError('required')).toBe(formModel.getError('required'));
formModel.setErrors({required: true});
expect(controlGroupDir.hasError('required')).toBe(formModel.hasError('required'));
expect(controlGroupDir.getError('required')).toBe(formModel.getError('required'));
});
2016-06-08 18:36:24 -04:00
});
describe('FormArrayName', () => {
let formModel: FormArray;
let formArrayDir: FormArrayName;
beforeEach(() => {
const parent = new FormGroupDirective([], []);
formModel = new FormArray([new FormControl('')]);
parent.form = new FormGroup({'array': formModel});
formArrayDir = new FormArrayName(parent, [], []);
formArrayDir.name = 'array';
});
it('should reexport control properties', () => {
expect(formArrayDir.control).toBe(formModel);
expect(formArrayDir.value).toBe(formModel.value);
expect(formArrayDir.valid).toBe(formModel.valid);
expect(formArrayDir.invalid).toBe(formModel.invalid);
expect(formArrayDir.pending).toBe(formModel.pending);
expect(formArrayDir.errors).toBe(formModel.errors);
expect(formArrayDir.pristine).toBe(formModel.pristine);
expect(formArrayDir.dirty).toBe(formModel.dirty);
expect(formArrayDir.touched).toBe(formModel.touched);
expect(formArrayDir.status).toBe(formModel.status);
expect(formArrayDir.untouched).toBe(formModel.untouched);
expect(formArrayDir.disabled).toBe(formModel.disabled);
expect(formArrayDir.enabled).toBe(formModel.enabled);
});
it('should reexport control methods', () => {
expect(formArrayDir.hasError('required')).toBe(formModel.hasError('required'));
expect(formArrayDir.getError('required')).toBe(formModel.getError('required'));
formModel.setErrors({required: true});
expect(formArrayDir.hasError('required')).toBe(formModel.hasError('required'));
expect(formArrayDir.getError('required')).toBe(formModel.getError('required'));
});
});
describe('FormControlDirective', () => {
let controlDir: any /** TODO #9100 */;
let control: any /** TODO #9100 */;
const checkProperties = function(control: AbstractControl) {
2016-06-08 18:36:24 -04:00
expect(controlDir.control).toBe(control);
expect(controlDir.value).toBe(control.value);
expect(controlDir.valid).toBe(control.valid);
expect(controlDir.invalid).toBe(control.invalid);
expect(controlDir.pending).toBe(control.pending);
2016-06-08 18:36:24 -04:00
expect(controlDir.errors).toBe(control.errors);
expect(controlDir.pristine).toBe(control.pristine);
expect(controlDir.dirty).toBe(control.dirty);
expect(controlDir.touched).toBe(control.touched);
expect(controlDir.untouched).toBe(control.untouched);
expect(controlDir.statusChanges).toBe(control.statusChanges);
expect(controlDir.status).toBe(control.status);
expect(controlDir.valueChanges).toBe(control.valueChanges);
expect(controlDir.disabled).toBe(control.disabled);
expect(controlDir.enabled).toBe(control.enabled);
2016-06-08 18:36:24 -04:00
};
beforeEach(() => {
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
controlDir = new FormControlDirective([Validators.required], [], [defaultAccessor], null);
2016-06-08 18:36:24 -04:00
controlDir.valueAccessor = new DummyControlValueAccessor();
control = new FormControl(null);
2016-06-08 18:36:24 -04:00
controlDir.form = control;
});
it('should reexport control properties', () => { checkProperties(control); });
2016-06-08 18:36:24 -04:00
it('should reexport control methods', () => {
expect(controlDir.hasError('required')).toBe(control.hasError('required'));
expect(controlDir.getError('required')).toBe(control.getError('required'));
control.setErrors({required: true});
expect(controlDir.hasError('required')).toBe(control.hasError('required'));
expect(controlDir.getError('required')).toBe(control.getError('required'));
});
it('should reexport new control properties', () => {
const newControl = new FormControl(null);
2016-06-08 18:36:24 -04:00
controlDir.form = newControl;
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
controlDir.ngOnChanges({'form': new SimpleChange(control, newControl, false)});
2016-06-08 18:36:24 -04:00
checkProperties(newControl);
});
it('should set up validator', () => {
2016-06-08 18:36:24 -04:00
expect(control.valid).toBe(true);
// this will add the required validator and recalculate the validity
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
controlDir.ngOnChanges({'form': new SimpleChange(null, control, false)});
2016-06-08 18:36:24 -04:00
expect(control.valid).toBe(false);
});
});
describe('NgModel', () => {
let ngModel: NgModel;
let control: FormControl;
2016-06-08 18:36:24 -04:00
beforeEach(() => {
ngModel = new NgModel(
null !, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
2016-06-08 18:36:24 -04:00
ngModel.valueAccessor = new DummyControlValueAccessor();
control = ngModel.control;
2016-06-08 18:36:24 -04:00
});
it('should reexport control properties', () => {
2016-06-08 18:36:24 -04:00
expect(ngModel.control).toBe(control);
expect(ngModel.value).toBe(control.value);
expect(ngModel.valid).toBe(control.valid);
expect(ngModel.invalid).toBe(control.invalid);
expect(ngModel.pending).toBe(control.pending);
2016-06-08 18:36:24 -04:00
expect(ngModel.errors).toBe(control.errors);
expect(ngModel.pristine).toBe(control.pristine);
expect(ngModel.dirty).toBe(control.dirty);
expect(ngModel.touched).toBe(control.touched);
expect(ngModel.untouched).toBe(control.untouched);
expect(ngModel.statusChanges).toBe(control.statusChanges);
expect(ngModel.status).toBe(control.status);
expect(ngModel.valueChanges).toBe(control.valueChanges);
expect(ngModel.disabled).toBe(control.disabled);
expect(ngModel.enabled).toBe(control.enabled);
2016-06-08 18:36:24 -04:00
});
it('should reexport control methods', () => {
expect(ngModel.hasError('required')).toBe(control.hasError('required'));
expect(ngModel.getError('required')).toBe(control.getError('required'));
control.setErrors({required: true});
expect(ngModel.hasError('required')).toBe(control.hasError('required'));
expect(ngModel.getError('required')).toBe(control.getError('required'));
});
it('should throw when no value accessor with named control', () => {
const namedDir = new NgModel(null !, null !, null !, null !);
namedDir.name = 'one';
expect(() => namedDir.ngOnChanges({}))
.toThrowError(new RegExp(`No value accessor for form control with name: 'one'`));
});
it('should throw when no value accessor with unnamed control', () => {
const unnamedDir = new NgModel(null !, null !, null !, null !);
expect(() => unnamedDir.ngOnChanges({}))
.toThrowError(
new RegExp(`No value accessor for form control with unspecified name attribute`));
});
it('should set up validator', fakeAsync(() => {
2016-06-08 18:36:24 -04:00
// this will add the required validator and recalculate the validity
ngModel.ngOnChanges({});
tick();
expect(ngModel.control.errors).toEqual({'required': true});
2016-06-08 18:36:24 -04:00
ngModel.control.setValue('someValue');
2016-06-08 18:36:24 -04:00
tick();
expect(ngModel.control.errors).toEqual({'async': true});
2016-06-08 18:36:24 -04:00
}));
it('should mark as disabled properly', fakeAsync(() => {
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange('', undefined, false)});
tick();
expect(ngModel.control.disabled).toEqual(false);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange('', null, false)});
tick();
expect(ngModel.control.disabled).toEqual(false);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange('', false, false)});
tick();
expect(ngModel.control.disabled).toEqual(false);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange('', 'false', false)});
tick();
expect(ngModel.control.disabled).toEqual(false);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange('', 0, false)});
tick();
expect(ngModel.control.disabled).toEqual(false);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange(null, '', false)});
tick();
expect(ngModel.control.disabled).toEqual(true);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange(null, 'true', false)});
tick();
expect(ngModel.control.disabled).toEqual(true);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange(null, true, false)});
tick();
expect(ngModel.control.disabled).toEqual(true);
refactor(compiler): generate less code for bindings to DOM elements Detailed changes: - remove `UNINITIALIZED`, initialize change detection fields with `undefined`. * we use `view.numberOfChecks === 0` now everywhere as indicator whether we are in the first change detection cycle (previously we used this only in a couple of places). * we keep the initialization itself as change detection get slower without it. - remove passing around `throwOnChange` in various generated calls, and store it on the view as property instead. - change generated code for bindings to DOM elements as follows: Before: ``` var currVal_10 = self.context.bgColor; if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) { self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString())); self._expr_10 = currVal_10; } var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' '); if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) { self.renderer.setText(self._text_1,currVal_11); self._expr_11 = currVal_11; } ```, After: ``` var currVal_10 = self.context.bgColor; jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21); var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' '); jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false); ``` Performance impact: - None seen (checked against internal latency lab) Part of #13651
2016-12-29 18:03:55 -05:00
ngModel.ngOnChanges({isDisabled: new SimpleChange(null, 'anything else', false)});
tick();
expect(ngModel.control.disabled).toEqual(true);
}));
2016-06-08 18:36:24 -04:00
});
describe('FormControlName', () => {
let formModel: any /** TODO #9100 */;
let controlNameDir: any /** TODO #9100 */;
2016-06-08 18:36:24 -04:00
beforeEach(() => {
formModel = new FormControl('name');
2016-06-08 18:36:24 -04:00
const parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'name': formModel});
refactor(forms): deprecate ngModel usage on same field as formControl (#22633) Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Now deprecated: ```html <input [formControl]="control" [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of `ngModel`'s other features - like delaying updates with`ngModelOptions` or exporting the directive - simply don't work, which has understandably caused some confusion. In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template. To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives. After (choice 1 - use reactive forms): ```html <input [formControl]="control"> ``` ```ts this.control.setValue('some value'); ``` After (choice 2 - use template-driven forms): ```html <input [(ngModel)]="value"> ``` ```ts this.value = 'some value'; ``` You can also choose to silence this warning by providing a config for `ReactiveFormsModule` at import time: ```ts imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ] ``` Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of `"always"`. This may help to track down where in the code the pattern is being used as the code is being updated. Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it can be removed in v7 when it is no longer needed. This will not display properly in API docs yet because dgeni doesn't yet support deprecating properties in object literals, but we have an open issue to resolve the discrepancy here: https://github.com/angular/angular/issues/22640. PR Close #22633
2018-03-07 12:46:10 -05:00
controlNameDir = new FormControlName(parent, [], [], [defaultAccessor], null);
controlNameDir.name = 'name';
(controlNameDir as{control: FormControl}).control = formModel;
2016-06-08 18:36:24 -04:00
});
it('should reexport control properties', () => {
2016-06-08 18:36:24 -04:00
expect(controlNameDir.control).toBe(formModel);
expect(controlNameDir.value).toBe(formModel.value);
expect(controlNameDir.valid).toBe(formModel.valid);
expect(controlNameDir.invalid).toBe(formModel.invalid);
expect(controlNameDir.pending).toBe(formModel.pending);
2016-06-08 18:36:24 -04:00
expect(controlNameDir.errors).toBe(formModel.errors);
expect(controlNameDir.pristine).toBe(formModel.pristine);
expect(controlNameDir.dirty).toBe(formModel.dirty);
expect(controlNameDir.touched).toBe(formModel.touched);
expect(controlNameDir.untouched).toBe(formModel.untouched);
expect(controlNameDir.statusChanges).toBe(formModel.statusChanges);
expect(controlNameDir.status).toBe(formModel.status);
expect(controlNameDir.valueChanges).toBe(formModel.valueChanges);
expect(controlNameDir.disabled).toBe(formModel.disabled);
expect(controlNameDir.enabled).toBe(formModel.enabled);
2016-06-08 18:36:24 -04:00
});
it('should reexport control methods', () => {
expect(controlNameDir.hasError('required')).toBe(formModel.hasError('required'));
expect(controlNameDir.getError('required')).toBe(formModel.getError('required'));
formModel.setErrors({required: true});
expect(controlNameDir.hasError('required')).toBe(formModel.hasError('required'));
expect(controlNameDir.getError('required')).toBe(formModel.getError('required'));
});
2016-06-08 18:36:24 -04:00
});
});
}