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

feat(forms): add support for disabled controls (#10994)

Browse Source
This commit is contained in:
Kara
2016-08-24 16:58:43 -07:00
committed by Victor Berchet
parent 4f8f8cfc66
commit 2b313e4979
24 changed files with 1335 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
modules/@angular/forms/test/directives_spec.ts
View File

@ -74,7 +74,7 @@ export function main() {
});
it('should return select multiple accessor when provided', () => {
const selectMultipleAccessor = new SelectMultipleControlValueAccessor();
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null, null);
expect(selectValueAccessor(dir, [
defaultAccessor, selectMultipleAccessor
])).toEqual(selectMultipleAccessor);
@ -95,7 +95,7 @@ export function main() {
it('should return custom accessor when provided with select multiple', () => {
const customAccessor = new SpyValueAccessor();
const selectMultipleAccessor = new SelectMultipleControlValueAccessor();
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null, null);
expect(selectValueAccessor(
dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
.toEqual(customAccessor);
@ -124,9 +124,9 @@ export function main() {
});
describe('formGroup', () => {
var form: any /** TODO #9100 */;
var formModel: FormGroup;
var loginControlDir: any /** TODO #9100 */;
let form: FormGroupDirective;
let formModel: FormGroup;
let loginControlDir: FormControlName;
beforeEach(() => {
form = new FormGroupDirective([], []);
@ -160,7 +160,7 @@ export function main() {
describe('addControl', () => {
it('should throw when no control found', () => {
var dir = new FormControlName(form, null, null, [defaultAccessor]);
const dir = new FormControlName(form, null, null, [defaultAccessor]);
dir.name = 'invalidName';
expect(() => form.addControl(dir))

237
modules/@angular/forms/test/form_array_spec.ts
View File

@ -8,9 +8,10 @@
import {fakeAsync, tick} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {FormArray, FormControl, FormGroup} from '@angular/forms';
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
import {isPresent} from '../src/facade/lang';
import {Validators} from '../src/validators';
export function main() {
function asyncValidator(expected: any /** TODO #9100 */, timeouts = {}) {
@ -34,8 +35,8 @@ export function main() {
describe('FormArray', () => {
describe('adding/removing', () => {
var a: FormArray;
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */, c3: any /** TODO #9100 */;
let a: FormArray;
let c1: FormControl, c2: FormControl, c3: FormControl;
beforeEach(() => {
a = new FormArray([]);
@ -72,12 +73,12 @@ export function main() {
describe('value', () => {
it('should be the reduced value of the child controls', () => {
var a = new FormArray([new FormControl(1), new FormControl(2)]);
const a = new FormArray([new FormControl(1), new FormControl(2)]);
expect(a.value).toEqual([1, 2]);
});
it('should be an empty array when there are no child controls', () => {
var a = new FormArray([]);
const a = new FormArray([]);
expect(a.value).toEqual([]);
});
});
@ -102,6 +103,22 @@ export function main() {
expect(c2.value).toEqual('two');
});
it('should set values for disabled child controls', () => {
c2.disable();
a.setValue(['one', 'two']);
expect(c2.value).toEqual('two');
expect(a.value).toEqual(['one']);
expect(a.getRawValue()).toEqual(['one', 'two']);
});
it('should set value for disabled arrays', () => {
a.disable();
a.setValue(['one', 'two']);
expect(c.value).toEqual('one');
expect(c2.value).toEqual('two');
expect(a.value).toEqual(['one', 'two']);
});
it('should set parent values', () => {
const form = new FormGroup({'parent': a});
a.setValue(['one', 'two']);
@ -119,6 +136,12 @@ export function main() {
])).toThrowError(new RegExp(`Cannot find form control at index 2`));
});
it('should throw if a value is not provided for a disabled control', () => {
c2.disable();
expect(() => a.setValue(['one']))
.toThrowError(new RegExp(`Must supply a value for form control at index: 1`));
});
it('should throw if no controls are set yet', () => {
const empty = new FormArray([]);
expect(() => empty.setValue(['one']))
@ -176,6 +199,22 @@ export function main() {
expect(c2.value).toEqual('two');
});
it('should patch disabled control values', () => {
c2.disable();
a.patchValue(['one', 'two']);
expect(c2.value).toEqual('two');
expect(a.value).toEqual(['one']);
expect(a.getRawValue()).toEqual(['one', 'two']);
});
it('should patch disabled control arrays', () => {
a.disable();
a.patchValue(['one', 'two']);
expect(c.value).toEqual('one');
expect(c2.value).toEqual('two');
expect(a.value).toEqual(['one', 'two']);
});
it('should set parent values', () => {
const form = new FormGroup({'parent': a});
a.patchValue(['one', 'two']);
@ -254,6 +293,12 @@ export function main() {
expect(a.value).toEqual(['initial value', '']);
});
it('should set its own value if boxed value passed', () => {
a.setValue(['new value', 'new value']);
a.reset([{value: 'initial value', disabled: false}, '']);
expect(a.value).toEqual(['initial value', '']);
});
it('should clear its own value if no value passed', () => {
a.setValue(['new value', 'new value']);
@ -378,6 +423,22 @@ export function main() {
expect(form.untouched).toBe(false);
});
it('should retain previous disabled state', () => {
a.disable();
a.reset();
expect(a.disabled).toBe(true);
});
it('should set child disabled state if boxed value passed', () => {
a.disable();
a.reset([{value: '', disabled: false}, '']);
expect(c.disabled).toBe(false);
expect(a.disabled).toBe(false);
});
describe('reset() events', () => {
let form: FormGroup, c3: FormControl, logger: any[];
@ -413,7 +474,7 @@ export function main() {
describe('errors', () => {
it('should run the validator when the value changes', () => {
var simpleValidator = (c: any /** TODO #9100 */) =>
const simpleValidator = (c: FormArray) =>
c.controls[0].value != 'correct' ? {'broken': true} : null;
var c = new FormControl(null);
@ -433,8 +494,8 @@ export function main() {
describe('dirty', () => {
var c: FormControl;
var a: FormArray;
let c: FormControl;
let a: FormArray;
beforeEach(() => {
c = new FormControl('value');
@ -451,8 +512,8 @@ export function main() {
});
describe('touched', () => {
var c: FormControl;
var a: FormArray;
let c: FormControl;
let a: FormArray;
beforeEach(() => {
c = new FormControl('value');
@ -470,8 +531,8 @@ export function main() {
describe('pending', () => {
var c: FormControl;
var a: FormArray;
let c: FormControl;
let a: FormArray;
beforeEach(() => {
c = new FormControl('value');
@ -499,8 +560,8 @@ export function main() {
});
describe('valueChanges', () => {
var a: FormArray;
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
let a: FormArray;
let c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
beforeEach(() => {
c1 = new FormControl('old1');
@ -566,22 +627,22 @@ export function main() {
describe('get', () => {
it('should return null when path is null', () => {
var g = new FormGroup({});
const g = new FormGroup({});
expect(g.get(null)).toEqual(null);
});
it('should return null when path is empty', () => {
var g = new FormGroup({});
const g = new FormGroup({});
expect(g.get([])).toEqual(null);
});
it('should return null when path is invalid', () => {
var g = new FormGroup({});
const g = new FormGroup({});
expect(g.get('invalid')).toEqual(null);
});
it('should return a child of a control group', () => {
var g = new FormGroup({
const g = new FormGroup({
'one': new FormControl('111'),
'nested': new FormGroup({'two': new FormControl('222')})
});
@ -593,7 +654,7 @@ export function main() {
});
it('should return an element of an array', () => {
var g = new FormGroup({'array': new FormArray([new FormControl('111')])});
const g = new FormGroup({'array': new FormArray([new FormControl('111')])});
expect(g.get(['array', 0]).value).toEqual('111');
});
@ -601,8 +662,8 @@ export function main() {
describe('asyncValidator', () => {
it('should run the async validator', fakeAsync(() => {
var c = new FormControl('value');
var g = new FormArray([c], null, asyncValidator('expected'));
const c = new FormControl('value');
const g = new FormArray([c], null, asyncValidator('expected'));
expect(g.pending).toEqual(true);
@ -612,5 +673,139 @@ export function main() {
expect(g.pending).toEqual(false);
}));
});
describe('disable() & enable()', () => {
let a: FormArray;
let c: FormControl;
let c2: FormControl;
beforeEach(() => {
c = new FormControl(null);
c2 = new FormControl(null);
a = new FormArray([c, c2]);
});
it('should mark the array as disabled', () => {
expect(a.disabled).toBe(false);
expect(a.valid).toBe(true);
a.disable();
expect(a.disabled).toBe(true);
expect(a.valid).toBe(false);
a.enable();
expect(a.disabled).toBe(false);
expect(a.valid).toBe(true);
});
it('should set the array status as disabled', () => {
expect(a.status).toBe('VALID');
a.disable();
expect(a.status).toBe('DISABLED');
a.enable();
expect(a.status).toBe('VALID');
});
it('should mark children of the array as disabled', () => {
expect(c.disabled).toBe(false);
expect(c2.disabled).toBe(false);
a.disable();
expect(c.disabled).toBe(true);
expect(c2.disabled).toBe(true);
a.enable();
expect(c.disabled).toBe(false);
expect(c2.disabled).toBe(false);
});
it('should ignore disabled controls in validation', () => {
const g = new FormGroup({
nested: new FormArray([new FormControl(null, Validators.required)]),
two: new FormControl('two')
});
expect(g.valid).toBe(false);
g.get('nested').disable();
expect(g.valid).toBe(true);
g.get('nested').enable();
expect(g.valid).toBe(false);
});
it('should ignore disabled controls when serializing value', () => {
const g = new FormGroup(
{nested: new FormArray([new FormControl('one')]), two: new FormControl('two')});
expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
g.get('nested').disable();
expect(g.value).toEqual({'two': 'two'});
g.get('nested').enable();
expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
});
it('should ignore disabled controls when determining dirtiness', () => {
const g = new FormGroup({nested: a, two: new FormControl('two')});
g.get(['nested', 0]).markAsDirty();
expect(g.dirty).toBe(true);
g.get('nested').disable();
expect(g.get('nested').dirty).toBe(true);
expect(g.dirty).toEqual(false);
g.get('nested').enable();
expect(g.dirty).toEqual(true);
});
it('should ignore disabled controls when determining touched state', () => {
const g = new FormGroup({nested: a, two: new FormControl('two')});
g.get(['nested', 0]).markAsTouched();
expect(g.touched).toBe(true);
g.get('nested').disable();
expect(g.get('nested').touched).toBe(true);
expect(g.touched).toEqual(false);
g.get('nested').enable();
expect(g.touched).toEqual(true);
});
describe('disabled events', () => {
let logger: string[];
let c: FormControl;
let a: FormArray;
let form: FormGroup;
beforeEach(() => {
logger = [];
c = new FormControl('', Validators.required);
a = new FormArray([c]);
form = new FormGroup({a: a});
});
it('should emit value change events in the right order', () => {
c.valueChanges.subscribe(() => logger.push('control'));
a.valueChanges.subscribe(() => logger.push('array'));
form.valueChanges.subscribe(() => logger.push('form'));
a.disable();
expect(logger).toEqual(['control', 'array', 'form']);
});
it('should emit status change events in the right order', () => {
c.statusChanges.subscribe(() => logger.push('control'));
a.statusChanges.subscribe(() => logger.push('array'));
form.statusChanges.subscribe(() => logger.push('form'));
a.disable();
expect(logger).toEqual(['control', 'array', 'form']);
});
});
});
});
}

15
modules/@angular/forms/test/form_builder_spec.ts
View File

@ -14,7 +14,7 @@ export function main() {
function asyncValidator(_: any /** TODO #9100 */) { return Promise.resolve(null); }
describe('Form Builder', () => {
var b: any /** TODO #9100 */;
let b: FormBuilder;
beforeEach(() => { b = new FormBuilder(); });
@ -24,6 +24,13 @@ export function main() {
expect(g.controls['login'].value).toEqual('some value');
});
it('should create controls from a boxed value', () => {
const g = b.group({'login': {value: 'some value', disabled: true}});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].disabled).toEqual(true);
});
it('should create controls from an array', () => {
var g = b.group(
{'login': ['some value'], 'password': ['some value', syncValidator, asyncValidator]});
@ -42,12 +49,6 @@ export function main() {
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should create groups with optional controls', () => {
var g = b.group({'login': 'some value'}, {'optionals': {'login': false}});
expect(g.contains('login')).toEqual(false);
});
it('should create groups with a custom validator', () => {
var g = b.group(
{'login': 'some value'}, {'validator': syncValidator, 'asyncValidator': asyncValidator});

348
modules/@angular/forms/test/form_control_spec.ts
View File

@ -12,6 +12,7 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
import {EventEmitter} from '../src/facade/async';
import {isPresent} from '../src/facade/lang';
import {FormArray} from '../src/model';
export function main() {
function asyncValidator(expected: any /** TODO #9100 */, timeouts = {}) {
@ -43,18 +44,40 @@ export function main() {
describe('FormControl', () => {
it('should default the value to null', () => {
var c = new FormControl();
const c = new FormControl();
expect(c.value).toBe(null);
});
describe('boxed values', () => {
it('should support valid boxed values on creation', () => {
const c = new FormControl({value: 'some val', disabled: true}, null, null);
expect(c.disabled).toBe(true);
expect(c.value).toBe('some val');
expect(c.status).toBe('DISABLED');
});
it('should not treat objects as boxed values if they have more than two props', () => {
const c = new FormControl({value: '', disabled: true, test: 'test'}, null, null);
expect(c.value).toEqual({value: '', disabled: true, test: 'test'});
expect(c.disabled).toBe(false);
});
it('should not treat objects as boxed values if disabled is missing', () => {
const c = new FormControl({value: '', test: 'test'}, null, null);
expect(c.value).toEqual({value: '', test: 'test'});
expect(c.disabled).toBe(false);
});
});
describe('validator', () => {
it('should run validator with the initial value', () => {
var c = new FormControl('value', Validators.required);
const c = new FormControl('value', Validators.required);
expect(c.valid).toEqual(true);
});
it('should rerun the validator when the value changes', () => {
var c = new FormControl('value', Validators.required);
const c = new FormControl('value', Validators.required);
c.setValue(null);
expect(c.valid).toEqual(false);
});
@ -69,12 +92,12 @@ export function main() {
});
it('should return errors', () => {
var c = new FormControl(null, Validators.required);
const c = new FormControl(null, Validators.required);
expect(c.errors).toEqual({'required': true});
});
it('should set single validator', () => {
var c = new FormControl(null);
const c = new FormControl(null);
expect(c.valid).toEqual(true);
c.setValidators(Validators.required);
@ -87,7 +110,7 @@ export function main() {
});
it('should set multiple validators from array', () => {
var c = new FormControl('');
const c = new FormControl('');
expect(c.valid).toEqual(true);
c.setValidators([Validators.minLength(5), Validators.required]);
@ -103,7 +126,7 @@ export function main() {
});
it('should clear validators', () => {
var c = new FormControl('', Validators.required);
const c = new FormControl('', Validators.required);
expect(c.valid).toEqual(false);
c.clearValidators();
@ -114,7 +137,7 @@ export function main() {
});
it('should add after clearing', () => {
var c = new FormControl('', Validators.required);
const c = new FormControl('', Validators.required);
expect(c.valid).toEqual(false);
c.clearValidators();
@ -127,7 +150,7 @@ export function main() {
describe('asyncValidator', () => {
it('should run validator with the initial value', fakeAsync(() => {
var c = new FormControl('value', null, asyncValidator('expected'));
const c = new FormControl('value', null, asyncValidator('expected'));
tick();
expect(c.valid).toEqual(false);
@ -135,7 +158,7 @@ export function main() {
}));
it('should support validators returning observables', fakeAsync(() => {
var c = new FormControl('value', null, asyncValidatorReturningObservable);
const c = new FormControl('value', null, asyncValidatorReturningObservable);
tick();
expect(c.valid).toEqual(false);
@ -143,7 +166,7 @@ export function main() {
}));
it('should rerun the validator when the value changes', fakeAsync(() => {
var c = new FormControl('value', null, asyncValidator('expected'));
const c = new FormControl('value', null, asyncValidator('expected'));
c.setValue('expected');
tick();
@ -152,7 +175,7 @@ export function main() {
}));
it('should run the async validator only when the sync validator passes', fakeAsync(() => {
var c = new FormControl('', Validators.required, asyncValidator('expected'));
const c = new FormControl('', Validators.required, asyncValidator('expected'));
tick();
expect(c.errors).toEqual({'required': true});
@ -164,7 +187,7 @@ export function main() {
}));
it('should mark the control as pending while running the async validation', fakeAsync(() => {
var c = new FormControl('', null, asyncValidator('expected'));
const c = new FormControl('', null, asyncValidator('expected'));
expect(c.pending).toEqual(true);
@ -174,7 +197,7 @@ export function main() {
}));
it('should only use the latest async validation run', fakeAsync(() => {
var c = new FormControl(
const c = new FormControl(
'', null, asyncValidator('expected', {'long': 200, 'expected': 100}));
c.setValue('long');
@ -194,7 +217,7 @@ export function main() {
}));
it('should add single async validator', fakeAsync(() => {
var c = new FormControl('value', null);
const c = new FormControl('value', null);
c.setAsyncValidators(asyncValidator('expected'));
expect(c.asyncValidator).not.toEqual(null);
@ -206,7 +229,7 @@ export function main() {
}));
it('should add async validator from array', fakeAsync(() => {
var c = new FormControl('value', null);
const c = new FormControl('value', null);
c.setAsyncValidators([asyncValidator('expected')]);
expect(c.asyncValidator).not.toEqual(null);
@ -218,12 +241,20 @@ export function main() {
}));
it('should clear async validators', fakeAsync(() => {
var c = new FormControl('value', [asyncValidator('expected'), otherAsyncValidator]);
const c = new FormControl('value', [asyncValidator('expected'), otherAsyncValidator]);
c.clearValidators();
expect(c.asyncValidator).toEqual(null);
}));
it('should not change validity state if control is disabled while async validating',
fakeAsync(() => {
const c = new FormControl('value', [asyncValidator('expected')]);
c.disable();
tick();
expect(c.status).toEqual('DISABLED');
}));
});
describe('dirty', () => {
@ -305,6 +336,14 @@ export function main() {
c.setValue('newValue', {emitEvent: false});
tick();
}));
it('should work on a disabled control', () => {
g.addControl('two', new FormControl('two'));
c.disable();
c.setValue('new value');
expect(c.value).toEqual('new value');
expect(g.value).toEqual({'two': 'two'});
});
});
describe('patchValue', () => {
@ -361,6 +400,15 @@ export function main() {
tick();
}));
it('should patch value on a disabled control', () => {
g.addControl('two', new FormControl('two'));
c.disable();
c.patchValue('new value');
expect(c.value).toEqual('new value');
expect(g.value).toEqual({'two': 'two'});
});
});
describe('reset()', () => {
@ -368,7 +416,7 @@ export function main() {
beforeEach(() => { c = new FormControl('initial value'); });
it('should restore the initial value of the control if passed', () => {
it('should reset to a specific value if passed', () => {
c.setValue('new value');
expect(c.value).toBe('new value');
@ -376,6 +424,14 @@ export function main() {
expect(c.value).toBe('initial value');
});
it('should reset to a specific value if passed with boxed value', () => {
c.setValue('new value');
expect(c.value).toBe('new value');
c.reset({value: 'initial value', disabled: false});
expect(c.value).toBe('initial value');
});
it('should clear the control value if no value is passed', () => {
c.setValue('new value');
expect(c.value).toBe('new value');
@ -402,7 +458,6 @@ export function main() {
expect(g.value).toEqual({'one': null});
});
it('should mark the control as pristine', () => {
c.markAsDirty();
expect(c.pristine).toBe(false);
@ -457,6 +512,20 @@ export function main() {
expect(g.untouched).toBe(false);
});
it('should retain the disabled state of the control', () => {
c.disable();
c.reset();
expect(c.disabled).toBe(true);
});
it('should set disabled state based on boxed value if passed', () => {
c.disable();
c.reset({value: null, disabled: false});
expect(c.disabled).toBe(false);
});
describe('reset() events', () => {
let g: FormGroup, c2: FormControl, logger: any[];
@ -483,6 +552,15 @@ export function main() {
c.reset();
expect(logger).toEqual(['control1', 'group']);
});
it('should emit one statusChange event per disabled control', () => {
g.statusChanges.subscribe(() => logger.push('group'));
c.statusChanges.subscribe(() => logger.push('control1'));
c2.statusChanges.subscribe(() => logger.push('control2'));
c.reset({value: null, disabled: true});
expect(logger).toEqual(['control1', 'group']);
});
});
});
@ -572,7 +650,7 @@ export function main() {
describe('setErrors', () => {
it('should set errors on a control', () => {
var c = new FormControl('someValue');
const c = new FormControl('someValue');
c.setErrors({'someError': true});
@ -581,7 +659,7 @@ export function main() {
});
it('should reset the errors and validity when the value changes', () => {
var c = new FormControl('someValue', Validators.required);
const c = new FormControl('someValue', Validators.required);
c.setErrors({'someError': true});
c.setValue('');
@ -590,8 +668,8 @@ export function main() {
});
it('should update the parent group\'s validity', () => {
var c = new FormControl('someValue');
var g = new FormGroup({'one': c});
const c = new FormControl('someValue');
const g = new FormGroup({'one': c});
expect(g.valid).toEqual(true);
@ -601,8 +679,8 @@ export function main() {
});
it('should not reset parent\'s errors', () => {
var c = new FormControl('someValue');
var g = new FormGroup({'one': c});
const c = new FormControl('someValue');
const g = new FormGroup({'one': c});
g.setErrors({'someGroupError': true});
c.setErrors({'someError': true});
@ -611,8 +689,8 @@ export function main() {
});
it('should reset errors when updating a value', () => {
var c = new FormControl('oldValue');
var g = new FormGroup({'one': c});
const c = new FormControl('oldValue');
const g = new FormGroup({'one': c});
g.setErrors({'someGroupError': true});
c.setErrors({'someError': true});
@ -623,5 +701,221 @@ export function main() {
expect(g.errors).toEqual(null);
});
});
describe('disable() & enable()', () => {
it('should mark the control as disabled', () => {
const c = new FormControl(null);
expect(c.disabled).toBe(false);
expect(c.valid).toBe(true);
c.disable();
expect(c.disabled).toBe(true);
expect(c.valid).toBe(false);
c.enable();
expect(c.disabled).toBe(false);
expect(c.valid).toBe(true);
});
it('should set the control status as disabled', () => {
const c = new FormControl(null);
expect(c.status).toEqual('VALID');
c.disable();
expect(c.status).toEqual('DISABLED');
c.enable();
expect(c.status).toEqual('VALID');
});
it('should retain the original value when disabled', () => {
const c = new FormControl('some value');
expect(c.value).toEqual('some value');
c.disable();
expect(c.value).toEqual('some value');
c.enable();
expect(c.value).toEqual('some value');
});
it('should keep the disabled control in the group, but return false for contains()', () => {
const c = new FormControl('');
const g = new FormGroup({'one': c});
expect(g.get('one')).toBeDefined();
expect(g.contains('one')).toBe(true);
c.disable();
expect(g.get('one')).toBeDefined();
expect(g.contains('one')).toBe(false);
});
it('should mark the parent group disabled if all controls are disabled', () => {
const c = new FormControl();
const c2 = new FormControl();
const g = new FormGroup({'one': c, 'two': c2});
expect(g.enabled).toBe(true);
c.disable();
expect(g.enabled).toBe(true);
c2.disable();
expect(g.enabled).toBe(false);
c.enable();
expect(g.enabled).toBe(true);
});
it('should update the parent group value when child control status changes', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const g = new FormGroup({'one': c, 'two': c2});
expect(g.value).toEqual({'one': 'one', 'two': 'two'});
c.disable();
expect(g.value).toEqual({'two': 'two'});
c2.disable();
expect(g.value).toEqual({'one': 'one', 'two': 'two'});
c.enable();
expect(g.value).toEqual({'one': 'one'});
});
it('should mark the parent array disabled if all controls are disabled', () => {
const c = new FormControl();
const c2 = new FormControl();
const a = new FormArray([c, c2]);
expect(a.enabled).toBe(true);
c.disable();
expect(a.enabled).toBe(true);
c2.disable();
expect(a.enabled).toBe(false);
c.enable();
expect(a.enabled).toBe(true);
});
it('should update the parent array value when child control status changes', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const a = new FormArray([c, c2]);
expect(a.value).toEqual(['one', 'two']);
c.disable();
expect(a.value).toEqual(['two']);
c2.disable();
expect(a.value).toEqual(['one', 'two']);
c.enable();
expect(a.value).toEqual(['one']);
});
it('should ignore disabled controls in validation', () => {
const c = new FormControl(null, Validators.required);
const c2 = new FormControl(null);
const g = new FormGroup({one: c, two: c2});
expect(g.valid).toBe(false);
c.disable();
expect(g.valid).toBe(true);
c.enable();
expect(g.valid).toBe(false);
});
it('should ignore disabled controls when serializing value in a group', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const g = new FormGroup({one: c, two: c2});
expect(g.value).toEqual({one: 'one', two: 'two'});
c.disable();
expect(g.value).toEqual({two: 'two'});
c.enable();
expect(g.value).toEqual({one: 'one', two: 'two'});
});
it('should ignore disabled controls when serializing value in an array', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const a = new FormArray([c, c2]);
expect(a.value).toEqual(['one', 'two']);
c.disable();
expect(a.value).toEqual(['two']);
c.enable();
expect(a.value).toEqual(['one', 'two']);
});
it('should ignore disabled controls when determining dirtiness', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const g = new FormGroup({one: c, two: c2});
c.markAsDirty();
expect(g.dirty).toBe(true);
c.disable();
expect(c.dirty).toBe(true);
expect(g.dirty).toBe(false);
c.enable();
expect(g.dirty).toBe(true);
});
it('should ignore disabled controls when determining touched state', () => {
const c = new FormControl('one');
const c2 = new FormControl('two');
const g = new FormGroup({one: c, two: c2});
c.markAsTouched();
expect(g.touched).toBe(true);
c.disable();
expect(c.touched).toBe(true);
expect(g.touched).toBe(false);
c.enable();
expect(g.touched).toBe(true);
});
describe('disabled events', () => {
let logger: string[];
let c: FormControl;
let g: FormGroup;
beforeEach(() => {
logger = [];
c = new FormControl('', Validators.required);
g = new FormGroup({one: c});
});
it('should emit a statusChange event when disabled status changes', () => {
c.statusChanges.subscribe((status: string) => logger.push(status));
c.disable();
expect(logger).toEqual(['DISABLED']);
c.enable();
expect(logger).toEqual(['DISABLED', 'INVALID']);
});
it('should emit status change events in correct order', () => {
c.statusChanges.subscribe(() => logger.push('control'));
g.statusChanges.subscribe(() => logger.push('group'));
c.disable();
expect(logger).toEqual(['control', 'group']);
});
});
});
});
}

423
modules/@angular/forms/test/form_group_spec.ts
View File

@ -42,17 +42,17 @@ export function main() {
describe('FormGroup', () => {
describe('value', () => {
it('should be the reduced value of the child controls', () => {
var g = new FormGroup({'one': new FormControl('111'), 'two': new FormControl('222')});
const g = new FormGroup({'one': new FormControl('111'), 'two': new FormControl('222')});
expect(g.value).toEqual({'one': '111', 'two': '222'});
});
it('should be empty when there are no child controls', () => {
var g = new FormGroup({});
const g = new FormGroup({});
expect(g.value).toEqual({});
});
it('should support nested groups', () => {
var g = new FormGroup({
const g = new FormGroup({
'one': new FormControl('111'),
'nested': new FormGroup({'two': new FormControl('222')})
});
@ -66,7 +66,7 @@ export function main() {
describe('adding and removing controls', () => {
it('should update value and validity when control is added', () => {
var g = new FormGroup({'one': new FormControl('1')});
const g = new FormGroup({'one': new FormControl('1')});
expect(g.value).toEqual({'one': '1'});
expect(g.valid).toBe(true);
@ -77,7 +77,7 @@ export function main() {
});
it('should update value and validity when control is removed', () => {
var g = new FormGroup(
const g = new FormGroup(
{'one': new FormControl('1'), 'two': new FormControl('2', Validators.minLength(10))});
expect(g.value).toEqual({'one': '1', 'two': '2'});
expect(g.valid).toBe(false);
@ -91,11 +91,11 @@ export function main() {
describe('errors', () => {
it('should run the validator when the value changes', () => {
var simpleValidator = (c: any /** TODO #9100 */) =>
const simpleValidator = (c: FormGroup) =>
c.controls['one'].value != 'correct' ? {'broken': true} : null;
var c = new FormControl(null);
var g = new FormGroup({'one': c}, null, simpleValidator);
var g = new FormGroup({'one': c}, simpleValidator);
c.setValue('correct');
@ -110,7 +110,7 @@ export function main() {
});
describe('dirty', () => {
var c: FormControl, g: FormGroup;
let c: FormControl, g: FormGroup;
beforeEach(() => {
c = new FormControl('value');
@ -128,7 +128,7 @@ export function main() {
describe('touched', () => {
var c: FormControl, g: FormGroup;
let c: FormControl, g: FormGroup;
beforeEach(() => {
c = new FormControl('value');
@ -164,6 +164,23 @@ export function main() {
expect(c2.value).toEqual('two');
});
it('should set child control values if disabled', () => {
c2.disable();
g.setValue({'one': 'one', 'two': 'two'});
expect(c2.value).toEqual('two');
expect(g.value).toEqual({'one': 'one'});
expect(g.getRawValue()).toEqual({'one': 'one', 'two': 'two'});
});
it('should set group value if group is disabled', () => {
g.disable();
g.setValue({'one': 'one', 'two': 'two'});
expect(c.value).toEqual('one');
expect(c2.value).toEqual('two');
expect(g.value).toEqual({'one': 'one', 'two': 'two'});
});
it('should set parent values', () => {
const form = new FormGroup({'parent': g});
g.setValue({'one': 'one', 'two': 'two'});
@ -181,6 +198,13 @@ export function main() {
.toThrowError(new RegExp(`Cannot find form control with name: three`));
});
it('should throw if a value is not provided for a disabled control', () => {
c2.disable();
expect(() => g.setValue({
'one': 'one'
})).toThrowError(new RegExp(`Must supply a value for form control with name: 'two'`));
});
it('should throw if no controls are set yet', () => {
const empty = new FormGroup({});
expect(() => empty.setValue({
@ -239,6 +263,22 @@ export function main() {
expect(c2.value).toEqual('two');
});
it('should patch disabled control values', () => {
c2.disable();
g.patchValue({'one': 'one', 'two': 'two'});
expect(c2.value).toEqual('two');
expect(g.value).toEqual({'one': 'one'});
expect(g.getRawValue()).toEqual({'one': 'one', 'two': 'two'});
});
it('should patch disabled control groups', () => {
g.disable();
g.patchValue({'one': 'one', 'two': 'two'});
expect(c.value).toEqual('one');
expect(c2.value).toEqual('two');
expect(g.value).toEqual({'one': 'one', 'two': 'two'});
});
it('should set parent values', () => {
const form = new FormGroup({'parent': g});
g.patchValue({'one': 'one', 'two': 'two'});
@ -317,6 +357,13 @@ export function main() {
expect(g.value).toEqual({'one': 'initial value', 'two': ''});
});
it('should set its own value if boxed value passed', () => {
g.setValue({'one': 'new value', 'two': 'new value'});
g.reset({'one': {value: 'initial value', disabled: false}, 'two': ''});
expect(g.value).toEqual({'one': 'initial value', 'two': ''});
});
it('should clear its own value if no value passed', () => {
g.setValue({'one': 'new value', 'two': 'new value'});
@ -440,6 +487,21 @@ export function main() {
expect(form.untouched).toBe(false);
});
it('should retain previous disabled state', () => {
g.disable();
g.reset();
expect(g.disabled).toBe(true);
});
it('should set child disabled state if boxed value passed', () => {
g.disable();
g.reset({'one': {value: '', disabled: false}, 'two': ''});
expect(c.disabled).toBe(false);
expect(g.disabled).toBe(false);
});
describe('reset() events', () => {
let form: FormGroup, c3: FormControl, logger: any[];
@ -470,159 +532,48 @@ export function main() {
g.reset();
expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
});
it('should emit one statusChange event per reset control', () => {
form.statusChanges.subscribe(() => logger.push('form'));
g.statusChanges.subscribe(() => logger.push('group'));
c.statusChanges.subscribe(() => logger.push('control1'));
c2.statusChanges.subscribe(() => logger.push('control2'));
c3.statusChanges.subscribe(() => logger.push('control3'));
g.reset({'one': {value: '', disabled: true}});
expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
});
});
});
describe('optional components', () => {
describe('contains', () => {
var group: any /** TODO #9100 */;
beforeEach(() => {
group = new FormGroup(
{
'required': new FormControl('requiredValue'),
'optional': new FormControl('optionalValue')
},
{'optional': false});
});
// rename contains into has
it('should return false when the component is not included',
() => { expect(group.contains('optional')).toEqual(false); });
it('should return false when there is no component with the given name',
() => { expect(group.contains('something else')).toEqual(false); });
it('should return true when the component is included', () => {
expect(group.contains('required')).toEqual(true);
group.include('optional');
expect(group.contains('optional')).toEqual(true);
});
});
it('should not include an inactive component into the group value', () => {
var group = new FormGroup(
{
'required': new FormControl('requiredValue'),
'optional': new FormControl('optionalValue')
},
{'optional': false});
expect(group.value).toEqual({'required': 'requiredValue'});
group.include('optional');
expect(group.value).toEqual({'required': 'requiredValue', 'optional': 'optionalValue'});
});
it('should not run Validators on an inactive component', () => {
var group = new FormGroup(
{
'required': new FormControl('requiredValue', Validators.required),
'optional': new FormControl('', Validators.required)
},
{'optional': false});
expect(group.valid).toEqual(true);
group.include('optional');
expect(group.valid).toEqual(false);
});
});
describe('valueChanges', () => {
var g: FormGroup, c1: FormControl, c2: FormControl;
describe('contains', () => {
let group: FormGroup;
beforeEach(() => {
c1 = new FormControl('old1');
c2 = new FormControl('old2');
g = new FormGroup({'one': c1, 'two': c2}, {'two': true});
group = new FormGroup({
'required': new FormControl('requiredValue'),
'optional': new FormControl({value: 'disabled value', disabled: true})
});
});
it('should fire an event after the value has been updated',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
g.valueChanges.subscribe({
next: (value: any) => {
expect(g.value).toEqual({'one': 'new1', 'two': 'old2'});
expect(value).toEqual({'one': 'new1', 'two': 'old2'});
async.done();
}
});
c1.setValue('new1');
}));
it('should return false when the component is disabled',
() => { expect(group.contains('optional')).toEqual(false); });
it('should fire an event after the control\'s observable fired an event',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
var controlCallbackIsCalled = false;
it('should return false when there is no component with the given name',
() => { expect(group.contains('something else')).toEqual(false); });
it('should return true when the component is enabled', () => {
expect(group.contains('required')).toEqual(true);
c1.valueChanges.subscribe({next: (value: any) => { controlCallbackIsCalled = true; }});
group.enable('optional');
g.valueChanges.subscribe({
next: (value: any) => {
expect(controlCallbackIsCalled).toBe(true);
async.done();
}
});
c1.setValue('new1');
}));
it('should fire an event when a control is excluded',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
g.valueChanges.subscribe({
next: (value: any) => {
expect(value).toEqual({'one': 'old1'});
async.done();
}
});
g.exclude('two');
}));
it('should fire an event when a control is included',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
g.exclude('two');
g.valueChanges.subscribe({
next: (value: any) => {
expect(value).toEqual({'one': 'old1', 'two': 'old2'});
async.done();
}
});
g.include('two');
}));
it('should fire an event every time a control is updated',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
var loggedValues: any[] /** TODO #9100 */ = [];
g.valueChanges.subscribe({
next: (value: any) => {
loggedValues.push(value);
if (loggedValues.length == 2) {
expect(loggedValues).toEqual([
{'one': 'new1', 'two': 'old2'}, {'one': 'new1', 'two': 'new2'}
]);
async.done();
}
}
});
c1.setValue('new1');
c2.setValue('new2');
}));
// hard to test without hacking zones
// xit('should not fire an event when an excluded control is updated', () => null);
expect(group.contains('optional')).toEqual(true);
});
});
describe('statusChanges', () => {
let control: FormControl;
let group: FormGroup;
@ -652,15 +603,15 @@ export function main() {
describe('getError', () => {
it('should return the error when it is present', () => {
var c = new FormControl('', Validators.required);
var g = new FormGroup({'one': c});
const c = new FormControl('', Validators.required);
const g = new FormGroup({'one': c});
expect(c.getError('required')).toEqual(true);
expect(g.getError('required', ['one'])).toEqual(true);
});
it('should return null otherwise', () => {
var c = new FormControl('not empty', Validators.required);
var g = new FormGroup({'one': c});
const c = new FormControl('not empty', Validators.required);
const g = new FormGroup({'one': c});
expect(c.getError('invalid')).toEqual(null);
expect(g.getError('required', ['one'])).toEqual(null);
expect(g.getError('required', ['invalid'])).toEqual(null);
@ -669,8 +620,8 @@ export function main() {
describe('asyncValidator', () => {
it('should run the async validator', fakeAsync(() => {
var c = new FormControl('value');
var g = new FormGroup({'one': c}, null, null, asyncValidator('expected'));
const c = new FormControl('value');
const g = new FormGroup({'one': c}, null, asyncValidator('expected'));
expect(g.pending).toEqual(true);
@ -681,8 +632,8 @@ export function main() {
}));
it('should set the parent group\'s status to pending', fakeAsync(() => {
var c = new FormControl('value', null, asyncValidator('expected'));
var g = new FormGroup({'one': c});
const c = new FormControl('value', null, asyncValidator('expected'));
const g = new FormGroup({'one': c});
expect(g.pending).toEqual(true);
@ -693,8 +644,8 @@ export function main() {
it('should run the parent group\'s async validator when children are pending',
fakeAsync(() => {
var c = new FormControl('value', null, asyncValidator('expected'));
var g = new FormGroup({'one': c}, null, null, asyncValidator('expected'));
const c = new FormControl('value', null, asyncValidator('expected'));
const g = new FormGroup({'one': c}, null, asyncValidator('expected'));
tick(1);
@ -702,5 +653,161 @@ export function main() {
expect(g.get('one').errors).toEqual({'async': true});
}));
});
describe('disable() & enable()', () => {
it('should mark the group as disabled', () => {
const g = new FormGroup({'one': new FormControl(null)});
expect(g.disabled).toBe(false);
expect(g.valid).toBe(true);
g.disable();
expect(g.disabled).toBe(true);
expect(g.valid).toBe(false);
g.enable();
expect(g.disabled).toBe(false);
expect(g.valid).toBe(true);
});
it('should set the group status as disabled', () => {
const g = new FormGroup({'one': new FormControl(null)});
expect(g.status).toEqual('VALID');
g.disable();
expect(g.status).toEqual('DISABLED');
g.enable();
expect(g.status).toBe('VALID');
});
it('should mark children of the group as disabled', () => {
const c1 = new FormControl(null);
const c2 = new FormControl(null);
const g = new FormGroup({'one': c1, 'two': c2});
expect(c1.disabled).toBe(false);
expect(c2.disabled).toBe(false);
g.disable();
expect(c1.disabled).toBe(true);
expect(c2.disabled).toBe(true);
g.enable();
expect(c1.disabled).toBe(false);
expect(c2.disabled).toBe(false);
});
it('should ignore disabled controls in validation', () => {
const g = new FormGroup({
nested: new FormGroup({one: new FormControl(null, Validators.required)}),
two: new FormControl('two')
});
expect(g.valid).toBe(false);
g.get('nested').disable();
expect(g.valid).toBe(true);
g.get('nested').enable();
expect(g.valid).toBe(false);
});
it('should ignore disabled controls when serializing value', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
g.get('nested').disable();
expect(g.value).toEqual({'two': 'two'});
g.get('nested').enable();
expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
});
it('should update its value when disabled with disabled children', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
g.get('nested.two').disable();
expect(g.value).toEqual({nested: {one: 'one'}});
g.get('nested').disable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
g.get('nested').enable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
});
it('should update its value when enabled with disabled children', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
g.get('nested.two').disable();
expect(g.value).toEqual({nested: {one: 'one'}});
g.get('nested').enable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
});
it('should ignore disabled controls when determining dirtiness', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
g.get('nested.one').markAsDirty();
expect(g.dirty).toBe(true);
g.get('nested').disable();
expect(g.get('nested').dirty).toBe(true);
expect(g.dirty).toEqual(false);
g.get('nested').enable();
expect(g.dirty).toEqual(true);
});
it('should ignore disabled controls when determining touched state', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
g.get('nested.one').markAsTouched();
expect(g.touched).toBe(true);
g.get('nested').disable();
expect(g.get('nested').touched).toBe(true);
expect(g.touched).toEqual(false);
g.get('nested').enable();
expect(g.touched).toEqual(true);
});
describe('disabled events', () => {
let logger: string[];
let c: FormControl;
let g: FormGroup;
let form: FormGroup;
beforeEach(() => {
logger = [];
c = new FormControl('', Validators.required);
g = new FormGroup({one: c});
form = new FormGroup({g: g});
});
it('should emit value change events in the right order', () => {
c.valueChanges.subscribe(() => logger.push('control'));
g.valueChanges.subscribe(() => logger.push('group'));
form.valueChanges.subscribe(() => logger.push('form'));
g.disable();
expect(logger).toEqual(['control', 'group', 'form']);
});
it('should emit status change events in the right order', () => {
c.statusChanges.subscribe(() => logger.push('control'));
g.statusChanges.subscribe(() => logger.push('group'));
form.statusChanges.subscribe(() => logger.push('form'));
g.disable();
expect(logger).toEqual(['control', 'group', 'form']);
});
});
});
});
}

87
modules/@angular/forms/test/reactive_integration_spec.ts
View File

@ -161,7 +161,7 @@ export function main() {
});
describe('programmatic changes', () => {
it('should update the value in the DOM when setValue is called', () => {
it('should update the value in the DOM when setValue() is called', () => {
const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('oldValue');
const form = new FormGroup({'login': login});
@ -175,6 +175,89 @@ export function main() {
expect(input.nativeElement.value).toEqual('newValue');
});
describe('disabled controls', () => {
it('should add disabled attribute to an individual control when instantiated as disabled',
() => {
const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl({value: 'some value', disabled: true});
fixture.debugElement.componentInstance.control = control;
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.disabled).toBe(true);
control.enable();
fixture.detectChanges();
expect(input.nativeElement.disabled).toBe(false);
});
it('should add disabled attribute to formControlName when instantiated as disabled', () => {
const fixture = TestBed.createComponent(FormGroupComp);
const control = new FormControl({value: 'some value', disabled: true});
fixture.debugElement.componentInstance.form = new FormGroup({login: control});
fixture.debugElement.componentInstance.control = control;
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.disabled).toBe(true);
control.enable();
fixture.detectChanges();
expect(input.nativeElement.disabled).toBe(false);
});
it('should add disabled attribute to an individual control when disable() is called',
() => {
const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('some value');
fixture.debugElement.componentInstance.control = control;
fixture.detectChanges();
control.disable();
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.disabled).toBe(true);
control.enable();
fixture.detectChanges();
expect(input.nativeElement.disabled).toBe(false);
});
it('should add disabled attribute to child controls when disable() is called on group',
() => {
const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('login')});
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
form.disable();
fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.disabled).toBe(true);
form.enable();
fixture.detectChanges();
expect(inputs[0].nativeElement.disabled).toBe(false);
});
it('should not add disabled attribute to custom controls when disable() is called', () => {
const fixture = TestBed.createComponent(MyInputForm);
const control = new FormControl('some value');
fixture.debugElement.componentInstance.form = new FormGroup({login: control});
fixture.detectChanges();
control.disable();
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('my-input'));
expect(input.nativeElement.getAttribute('disabled')).toBe(null);
});
});
});
describe('user input', () => {
@ -1203,7 +1286,7 @@ class WrappedValueForm {
template: `
<div [formGroup]="form">
<my-input formControlName="login"></my-input>
</div>
</div>
`
})
class MyInputForm {

136
modules/@angular/forms/test/template_integration_spec.ts
View File

@ -7,13 +7,14 @@
*/
import {NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {Component, Input} from '@angular/core';
import {TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import {beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {FormsModule, NgForm} from '@angular/forms';
import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, NgForm} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
import {ListWrapper} from '../src/facade/collection';
export function main() {
@ -24,7 +25,7 @@ export function main() {
declarations: [
StandaloneNgModel, NgModelForm, NgModelGroupForm, NgModelValidBinding, NgModelNgIfForm,
NgModelRadioForm, NgModelSelectForm, NgNoFormComp, InvalidNgModelNoName,
NgModelOptionsStandalone
NgModelOptionsStandalone, NgModelCustomComp, NgModelCustomWrapper
],
imports: [FormsModule]
});
@ -364,6 +365,66 @@ export function main() {
}));
});
describe('disabled controls', () => {
it('should not consider disabled controls in value or validation', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.isDisabled = false;
fixture.debugElement.componentInstance.first = '';
fixture.debugElement.componentInstance.last = 'Drew';
fixture.debugElement.componentInstance.email = 'some email';
fixture.detectChanges();
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.value).toEqual({name: {first: '', last: 'Drew'}, email: 'some email'});
expect(form.valid).toBe(false);
expect(form.control.get('name.first').disabled).toBe(false);
fixture.componentInstance.isDisabled = true;
fixture.detectChanges();
tick();
expect(form.value).toEqual({name: {last: 'Drew'}, email: 'some email'});
expect(form.valid).toBe(true);
expect(form.control.get('name.first').disabled).toBe(true);
}));
it('should add disabled attribute in the UI if disable() is called programmatically',
fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.isDisabled = false;
fixture.debugElement.componentInstance.first = 'Nancy';
fixture.detectChanges();
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
form.control.get('name.first').disable();
fixture.detectChanges();
tick();
const input = fixture.debugElement.query(By.css(`[name="first"]`));
expect(input.nativeElement.disabled).toBe(true);
}));
it('should disable a custom control if disabled attr is added', async(() => {
const fixture = TestBed.createComponent(NgModelCustomWrapper);
fixture.debugElement.componentInstance.name = 'Nancy';
fixture.debugElement.componentInstance.isDisabled = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.control.get('name').disabled).toBe(true);
const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
expect(customInput.nativeElement.disabled).toEqual(true);
});
});
}));
});
describe('radio controls', () => {
it('should support <type=radio>', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm);
@ -488,6 +549,30 @@ export function main() {
}));
});
describe('custom value accessors', () => {
it('should support standard writing to view and model', async(() => {
const fixture = TestBed.createComponent(NgModelCustomWrapper);
fixture.debugElement.componentInstance.name = 'Nancy';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
// model -> view
const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
expect(customInput.nativeElement.value).toEqual('Nancy');
customInput.nativeElement.value = 'Carson';
dispatchEvent(customInput.nativeElement, 'input');
fixture.detectChanges();
// view -> model
expect(fixture.debugElement.componentInstance.name).toEqual('Carson');
});
});
}));
});
describe('ngModel corner cases', () => {
it('should update the view when the model is set back to what used to be in the view',
fakeAsync(() => {
@ -541,7 +626,7 @@ class StandaloneNgModel {
@Component({
selector: 'ng-model-form',
template: `
<form (ngSubmit)="name='submitted'">
<form (ngSubmit)="name='submitted'" (reset)="onReset()">
<input name="name" [(ngModel)]="name" minlength="10" [ngModelOptions]="options">
</form>
`
@ -549,6 +634,8 @@ class StandaloneNgModel {
class NgModelForm {
name: string;
options = {};
onReset() {}
}
@Component({
@ -556,7 +643,7 @@ class NgModelForm {
template: `
<form>
<div ngModelGroup="name">
<input name="first" [(ngModel)]="first" required>
<input name="first" [(ngModel)]="first" required [disabled]="isDisabled">
<input name="last" [(ngModel)]="last">
</div>
<input name="email" [(ngModel)]="email">
@ -567,10 +654,11 @@ class NgModelGroupForm {
first: string;
last: string;
email: string;
isDisabled: boolean;
}
@Component({
selector: 'ng-model-group-form',
selector: 'ng-model-valid-binding',
template: `
<form>
<div ngModelGroup="name" #group="ngModelGroup">
@ -668,6 +756,40 @@ class NgModelSelectForm {
cities: any[] = [];
}
@Component({
selector: 'ng-model-custom-comp',
template: `
<input name="custom" [(ngModel)]="model" (ngModelChange)="changeFn($event)" [disabled]="isDisabled">
`,
providers: [{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: NgModelCustomComp}]
})
class NgModelCustomComp implements ControlValueAccessor {
model: string;
@Input('disabled') isDisabled: boolean = false;
changeFn: (value: any) => void;
writeValue(value: any) { this.model = value; }
registerOnChange(fn: (value: any) => void) { this.changeFn = fn; }
registerOnTouched() {}
setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
}
@Component({
selector: 'ng-model-custom-wrapper',
template: `
<form>
<ng-model-custom-comp name="name" [(ngModel)]="name" [disabled]="isDisabled"></ng-model-custom-comp>
</form>
`
})
class NgModelCustomWrapper {
name: string;
isDisabled = false;
}
function sortedClassList(el: HTMLElement) {
var l = getDOM().classList(el);
ListWrapper.sort(l);