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

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']);
});
});
});
});
}