1651 lines
54 KiB
TypeScript
1651 lines
54 KiB
TypeScript
/**
|
|
* @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 {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
|
|
import {afterEach, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
|
|
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
|
|
import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
|
|
|
|
import {EventEmitter, ObservableWrapper, TimerWrapper} from '../src/facade/async';
|
|
import {IS_DART, isPresent} from '../src/facade/lang';
|
|
import {PromiseWrapper} from '../src/facade/promise';
|
|
|
|
export function main() {
|
|
function asyncValidator(expected: any /** TODO #9100 */, timeouts = /*@ts2dart_const*/ {}) {
|
|
return (c: any /** TODO #9100 */) => {
|
|
var completer = PromiseWrapper.completer();
|
|
var t = isPresent((timeouts as any /** TODO #9100 */)[c.value]) ?
|
|
(timeouts as any /** TODO #9100 */)[c.value] :
|
|
0;
|
|
var res = c.value != expected ? {'async': true} : null;
|
|
|
|
if (t == 0) {
|
|
completer.resolve(res);
|
|
} else {
|
|
TimerWrapper.setTimeout(() => { completer.resolve(res); }, t);
|
|
}
|
|
|
|
return completer.promise;
|
|
};
|
|
}
|
|
|
|
function asyncValidatorReturningObservable(c: FormControl) {
|
|
var e = new EventEmitter();
|
|
PromiseWrapper.scheduleMicrotask(() => ObservableWrapper.callEmit(e, {'async': true}));
|
|
return e;
|
|
}
|
|
|
|
function otherAsyncValidator() { return PromiseWrapper.resolve({'other': true}); }
|
|
|
|
describe('Form Model', () => {
|
|
describe('FormControl', () => {
|
|
it('should default the value to null', () => {
|
|
var c = new FormControl();
|
|
expect(c.value).toBe(null);
|
|
});
|
|
|
|
describe('validator', () => {
|
|
it('should run validator with the initial value', () => {
|
|
var 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);
|
|
c.updateValue(null);
|
|
expect(c.valid).toEqual(false);
|
|
});
|
|
|
|
it('should support arrays of validator functions if passed', () => {
|
|
const c = new FormControl('value', [Validators.required, Validators.minLength(3)]);
|
|
c.updateValue('a');
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.updateValue('aaa');
|
|
expect(c.valid).toEqual(true);
|
|
});
|
|
|
|
it('should return errors', () => {
|
|
var c = new FormControl(null, Validators.required);
|
|
expect(c.errors).toEqual({'required': true});
|
|
});
|
|
|
|
it('should set single validator', () => {
|
|
var c = new FormControl(null);
|
|
expect(c.valid).toEqual(true);
|
|
|
|
c.setValidators(Validators.required);
|
|
|
|
c.updateValue(null);
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.updateValue('abc');
|
|
expect(c.valid).toEqual(true);
|
|
});
|
|
|
|
it('should set multiple validators from array', () => {
|
|
var c = new FormControl('');
|
|
expect(c.valid).toEqual(true);
|
|
|
|
c.setValidators([Validators.minLength(5), Validators.required]);
|
|
|
|
c.updateValue('');
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.updateValue('abc');
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.updateValue('abcde');
|
|
expect(c.valid).toEqual(true);
|
|
});
|
|
|
|
it('should clear validators', () => {
|
|
var c = new FormControl('', Validators.required);
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.clearValidators();
|
|
expect(c.validator).toEqual(null);
|
|
|
|
c.updateValue('');
|
|
expect(c.valid).toEqual(true);
|
|
});
|
|
|
|
it('should add after clearing', () => {
|
|
var c = new FormControl('', Validators.required);
|
|
expect(c.valid).toEqual(false);
|
|
|
|
c.clearValidators();
|
|
expect(c.validator).toEqual(null);
|
|
|
|
c.setValidators([Validators.required]);
|
|
expect(c.validator).not.toBe(null);
|
|
});
|
|
});
|
|
|
|
describe('asyncValidator', () => {
|
|
it('should run validator with the initial value', fakeAsync(() => {
|
|
var c = new FormControl('value', null, asyncValidator('expected'));
|
|
tick();
|
|
|
|
expect(c.valid).toEqual(false);
|
|
expect(c.errors).toEqual({'async': true});
|
|
}));
|
|
|
|
it('should support validators returning observables', fakeAsync(() => {
|
|
var c = new FormControl('value', null, asyncValidatorReturningObservable);
|
|
tick();
|
|
|
|
expect(c.valid).toEqual(false);
|
|
expect(c.errors).toEqual({'async': true});
|
|
}));
|
|
|
|
it('should rerun the validator when the value changes', fakeAsync(() => {
|
|
var c = new FormControl('value', null, asyncValidator('expected'));
|
|
|
|
c.updateValue('expected');
|
|
tick();
|
|
|
|
expect(c.valid).toEqual(true);
|
|
}));
|
|
|
|
it('should run the async validator only when the sync validator passes', fakeAsync(() => {
|
|
var c = new FormControl('', Validators.required, asyncValidator('expected'));
|
|
tick();
|
|
|
|
expect(c.errors).toEqual({'required': true});
|
|
|
|
c.updateValue('some value');
|
|
tick();
|
|
|
|
expect(c.errors).toEqual({'async': true});
|
|
}));
|
|
|
|
it('should mark the control as pending while running the async validation',
|
|
fakeAsync(() => {
|
|
var c = new FormControl('', null, asyncValidator('expected'));
|
|
|
|
expect(c.pending).toEqual(true);
|
|
|
|
tick();
|
|
|
|
expect(c.pending).toEqual(false);
|
|
}));
|
|
|
|
it('should only use the latest async validation run', fakeAsync(() => {
|
|
var c = new FormControl(
|
|
'', null, asyncValidator('expected', {'long': 200, 'expected': 100}));
|
|
|
|
c.updateValue('long');
|
|
c.updateValue('expected');
|
|
|
|
tick(300);
|
|
|
|
expect(c.valid).toEqual(true);
|
|
}));
|
|
|
|
it('should support arrays of async validator functions if passed', fakeAsync(() => {
|
|
const c =
|
|
new FormControl('value', null, [asyncValidator('expected'), otherAsyncValidator]);
|
|
tick();
|
|
|
|
expect(c.errors).toEqual({'async': true, 'other': true});
|
|
}));
|
|
|
|
it('should add single async validator', fakeAsync(() => {
|
|
var c = new FormControl('value', null);
|
|
|
|
c.setAsyncValidators(asyncValidator('expected'));
|
|
expect(c.asyncValidator).not.toEqual(null);
|
|
|
|
c.updateValue('expected');
|
|
tick();
|
|
|
|
expect(c.valid).toEqual(true);
|
|
}));
|
|
|
|
it('should add async validator from array', fakeAsync(() => {
|
|
var c = new FormControl('value', null);
|
|
|
|
c.setAsyncValidators([asyncValidator('expected')]);
|
|
expect(c.asyncValidator).not.toEqual(null);
|
|
|
|
c.updateValue('expected');
|
|
tick();
|
|
|
|
expect(c.valid).toEqual(true);
|
|
}));
|
|
|
|
it('should clear async validators', fakeAsync(() => {
|
|
var c = new FormControl('value', [asyncValidator('expected'), otherAsyncValidator]);
|
|
|
|
c.clearValidators();
|
|
|
|
expect(c.asyncValidator).toEqual(null);
|
|
}));
|
|
});
|
|
|
|
describe('dirty', () => {
|
|
it('should be false after creating a control', () => {
|
|
const c = new FormControl('value');
|
|
expect(c.dirty).toEqual(false);
|
|
});
|
|
|
|
it('should be true after changing the value of the control', () => {
|
|
const c = new FormControl('value');
|
|
c.markAsDirty();
|
|
expect(c.dirty).toEqual(true);
|
|
});
|
|
});
|
|
|
|
describe('touched', () => {
|
|
it('should be false after creating a control', () => {
|
|
const c = new FormControl('value');
|
|
expect(c.touched).toEqual(false);
|
|
});
|
|
|
|
it('should be true after markAsTouched runs', () => {
|
|
const c = new FormControl('value');
|
|
c.markAsTouched();
|
|
expect(c.touched).toEqual(true);
|
|
});
|
|
});
|
|
|
|
describe('updateValue', () => {
|
|
var g: any /** TODO #9100 */, c: any /** TODO #9100 */;
|
|
beforeEach(() => {
|
|
c = new FormControl('oldValue');
|
|
g = new FormGroup({'one': c});
|
|
});
|
|
|
|
it('should update the value of the control', () => {
|
|
c.updateValue('newValue');
|
|
expect(c.value).toEqual('newValue');
|
|
});
|
|
|
|
it('should invoke ngOnChanges if it is present', () => {
|
|
var ngOnChanges: any /** TODO #9100 */;
|
|
c.registerOnChange((v: any /** TODO #9100 */) => ngOnChanges = ['invoked', v]);
|
|
|
|
c.updateValue('newValue');
|
|
|
|
expect(ngOnChanges).toEqual(['invoked', 'newValue']);
|
|
});
|
|
|
|
it('should not invoke on change when explicitly specified', () => {
|
|
var onChange: any /** TODO #9100 */ = null;
|
|
c.registerOnChange((v: any /** TODO #9100 */) => onChange = ['invoked', v]);
|
|
|
|
c.updateValue('newValue', {emitModelToViewChange: false});
|
|
|
|
expect(onChange).toBeNull();
|
|
});
|
|
|
|
it('should update the parent', () => {
|
|
c.updateValue('newValue');
|
|
expect(g.value).toEqual({'one': 'newValue'});
|
|
});
|
|
|
|
it('should not update the parent when explicitly specified', () => {
|
|
c.updateValue('newValue', {onlySelf: true});
|
|
expect(g.value).toEqual({'one': 'oldValue'});
|
|
});
|
|
|
|
it('should fire an event', fakeAsync(() => {
|
|
ObservableWrapper.subscribe(
|
|
c.valueChanges, (value) => { expect(value).toEqual('newValue'); });
|
|
|
|
c.updateValue('newValue');
|
|
tick();
|
|
}));
|
|
|
|
it('should not fire an event when explicitly specified', fakeAsync(() => {
|
|
ObservableWrapper.subscribe(c.valueChanges, (value) => { throw 'Should not happen'; });
|
|
|
|
c.updateValue('newValue', {emitEvent: false});
|
|
|
|
tick();
|
|
}));
|
|
});
|
|
|
|
describe('reset()', () => {
|
|
let c: FormControl;
|
|
|
|
beforeEach(() => { c = new FormControl('initial value'); });
|
|
|
|
it('should restore the initial value of the control if passed', () => {
|
|
c.updateValue('new value');
|
|
expect(c.value).toBe('new value');
|
|
|
|
c.reset('initial value');
|
|
expect(c.value).toBe('initial value');
|
|
});
|
|
|
|
it('should clear the control value if no value is passed', () => {
|
|
c.updateValue('new value');
|
|
expect(c.value).toBe('new value');
|
|
|
|
c.reset();
|
|
expect(c.value).toBe(null);
|
|
});
|
|
|
|
it('should update the value of any parent controls with passed value', () => {
|
|
const g = new FormGroup({'one': c});
|
|
c.updateValue('new value');
|
|
expect(g.value).toEqual({'one': 'new value'});
|
|
|
|
c.reset('initial value');
|
|
expect(g.value).toEqual({'one': 'initial value'});
|
|
});
|
|
|
|
it('should update the value of any parent controls with null value', () => {
|
|
const g = new FormGroup({'one': c});
|
|
c.updateValue('new value');
|
|
expect(g.value).toEqual({'one': 'new value'});
|
|
|
|
c.reset();
|
|
expect(g.value).toEqual({'one': null});
|
|
});
|
|
|
|
|
|
it('should mark the control as pristine', () => {
|
|
c.markAsDirty();
|
|
expect(c.pristine).toBe(false);
|
|
|
|
c.reset();
|
|
expect(c.pristine).toBe(true);
|
|
});
|
|
|
|
it('should set the parent pristine state if all pristine', () => {
|
|
const g = new FormGroup({'one': c});
|
|
c.markAsDirty();
|
|
expect(g.pristine).toBe(false);
|
|
|
|
c.reset();
|
|
expect(g.pristine).toBe(true);
|
|
});
|
|
|
|
it('should not set the parent pristine state if it has other dirty controls', () => {
|
|
const c2 = new FormControl('two');
|
|
const g = new FormGroup({'one': c, 'two': c2});
|
|
c.markAsDirty();
|
|
c2.markAsDirty();
|
|
|
|
c.reset();
|
|
expect(g.pristine).toBe(false);
|
|
});
|
|
|
|
it('should mark the control as untouched', () => {
|
|
c.markAsTouched();
|
|
expect(c.untouched).toBe(false);
|
|
|
|
c.reset();
|
|
expect(c.untouched).toBe(true);
|
|
});
|
|
|
|
it('should set the parent untouched state if all untouched', () => {
|
|
const g = new FormGroup({'one': c});
|
|
c.markAsTouched();
|
|
expect(g.untouched).toBe(false);
|
|
|
|
c.reset();
|
|
expect(g.untouched).toBe(true);
|
|
});
|
|
|
|
it('should not set the parent untouched state if other touched controls', () => {
|
|
const c2 = new FormControl('two');
|
|
const g = new FormGroup({'one': c, 'two': c2});
|
|
c.markAsTouched();
|
|
c2.markAsTouched();
|
|
|
|
c.reset();
|
|
expect(g.untouched).toBe(false);
|
|
});
|
|
|
|
describe('reset() events', () => {
|
|
let g: FormGroup, c2: FormControl, logger: any[];
|
|
|
|
beforeEach(() => {
|
|
c2 = new FormControl('two');
|
|
g = new FormGroup({'one': c, 'two': c2});
|
|
logger = [];
|
|
});
|
|
|
|
it('should emit one valueChange event per reset control', () => {
|
|
g.valueChanges.subscribe(() => logger.push('group'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
|
|
c.reset();
|
|
expect(logger).toEqual(['control1', 'group']);
|
|
});
|
|
|
|
it('should emit one statusChange event per reset control', () => {
|
|
g.statusChanges.subscribe(() => logger.push('group'));
|
|
c.statusChanges.subscribe(() => logger.push('control1'));
|
|
c2.statusChanges.subscribe(() => logger.push('control2'));
|
|
|
|
c.reset();
|
|
expect(logger).toEqual(['control1', 'group']);
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
describe('valueChanges & statusChanges', () => {
|
|
var c: any /** TODO #9100 */;
|
|
|
|
beforeEach(() => { c = new FormControl('old', Validators.required); });
|
|
|
|
it('should fire an event after the value has been updated',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
ObservableWrapper.subscribe(c.valueChanges, (value) => {
|
|
expect(c.value).toEqual('new');
|
|
expect(value).toEqual('new');
|
|
async.done();
|
|
});
|
|
c.updateValue('new');
|
|
}));
|
|
|
|
it('should fire an event after the status has been updated to invalid', fakeAsync(() => {
|
|
ObservableWrapper.subscribe(c.statusChanges, (status) => {
|
|
expect(c.status).toEqual('INVALID');
|
|
expect(status).toEqual('INVALID');
|
|
});
|
|
|
|
c.updateValue('');
|
|
tick();
|
|
}));
|
|
|
|
it('should fire an event after the status has been updated to pending', fakeAsync(() => {
|
|
var c = new FormControl('old', Validators.required, asyncValidator('expected'));
|
|
|
|
var log: any[] /** TODO #9100 */ = [];
|
|
ObservableWrapper.subscribe(c.valueChanges, (value) => log.push(`value: '${value}'`));
|
|
ObservableWrapper.subscribe(
|
|
c.statusChanges, (status) => log.push(`status: '${status}'`));
|
|
|
|
c.updateValue('');
|
|
tick();
|
|
|
|
c.updateValue('nonEmpty');
|
|
tick();
|
|
|
|
c.updateValue('expected');
|
|
tick();
|
|
|
|
expect(log).toEqual([
|
|
'' +
|
|
'value: \'\'',
|
|
'status: \'INVALID\'',
|
|
'value: \'nonEmpty\'',
|
|
'status: \'PENDING\'',
|
|
'status: \'INVALID\'',
|
|
'value: \'expected\'',
|
|
'status: \'PENDING\'',
|
|
'status: \'VALID\'',
|
|
]);
|
|
}));
|
|
|
|
// TODO: remove the if statement after making observable delivery sync
|
|
if (!IS_DART) {
|
|
it('should update set errors and status before emitting an event',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
c.valueChanges.subscribe((value: any /** TODO #9100 */) => {
|
|
expect(c.valid).toEqual(false);
|
|
expect(c.errors).toEqual({'required': true});
|
|
async.done();
|
|
});
|
|
c.updateValue('');
|
|
}));
|
|
}
|
|
|
|
it('should return a cold observable',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
c.updateValue('will be ignored');
|
|
ObservableWrapper.subscribe(c.valueChanges, (value) => {
|
|
expect(value).toEqual('new');
|
|
async.done();
|
|
});
|
|
c.updateValue('new');
|
|
}));
|
|
});
|
|
|
|
describe('setErrors', () => {
|
|
it('should set errors on a control', () => {
|
|
var c = new FormControl('someValue');
|
|
|
|
c.setErrors({'someError': true});
|
|
|
|
expect(c.valid).toEqual(false);
|
|
expect(c.errors).toEqual({'someError': true});
|
|
});
|
|
|
|
it('should reset the errors and validity when the value changes', () => {
|
|
var c = new FormControl('someValue', Validators.required);
|
|
|
|
c.setErrors({'someError': true});
|
|
c.updateValue('');
|
|
|
|
expect(c.errors).toEqual({'required': true});
|
|
});
|
|
|
|
it('should update the parent group\'s validity', () => {
|
|
var c = new FormControl('someValue');
|
|
var g = new FormGroup({'one': c});
|
|
|
|
expect(g.valid).toEqual(true);
|
|
|
|
c.setErrors({'someError': true});
|
|
|
|
expect(g.valid).toEqual(false);
|
|
});
|
|
|
|
it('should not reset parent\'s errors', () => {
|
|
var c = new FormControl('someValue');
|
|
var g = new FormGroup({'one': c});
|
|
|
|
g.setErrors({'someGroupError': true});
|
|
c.setErrors({'someError': true});
|
|
|
|
expect(g.errors).toEqual({'someGroupError': true});
|
|
});
|
|
|
|
it('should reset errors when updating a value', () => {
|
|
var c = new FormControl('oldValue');
|
|
var g = new FormGroup({'one': c});
|
|
|
|
g.setErrors({'someGroupError': true});
|
|
c.setErrors({'someError': true});
|
|
|
|
c.updateValue('newValue');
|
|
|
|
expect(c.errors).toEqual(null);
|
|
expect(g.errors).toEqual(null);
|
|
});
|
|
});
|
|
});
|
|
|
|
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')});
|
|
expect(g.value).toEqual({'one': '111', 'two': '222'});
|
|
});
|
|
|
|
it('should be empty when there are no child controls', () => {
|
|
var g = new FormGroup({});
|
|
expect(g.value).toEqual({});
|
|
});
|
|
|
|
it('should support nested groups', () => {
|
|
var g = new FormGroup({
|
|
'one': new FormControl('111'),
|
|
'nested': new FormGroup({'two': new FormControl('222')})
|
|
});
|
|
expect(g.value).toEqual({'one': '111', 'nested': {'two': '222'}});
|
|
|
|
(<FormControl>(g.controls['nested'].find('two'))).updateValue('333');
|
|
|
|
expect(g.value).toEqual({'one': '111', 'nested': {'two': '333'}});
|
|
});
|
|
});
|
|
|
|
describe('adding and removing controls', () => {
|
|
it('should update value and validity when control is added', () => {
|
|
var g = new FormGroup({'one': new FormControl('1')});
|
|
expect(g.value).toEqual({'one': '1'});
|
|
expect(g.valid).toBe(true);
|
|
|
|
g.addControl('two', new FormControl('2', Validators.minLength(10)));
|
|
|
|
expect(g.value).toEqual({'one': '1', 'two': '2'});
|
|
expect(g.valid).toBe(false);
|
|
});
|
|
|
|
it('should update value and validity when control is removed', () => {
|
|
var 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);
|
|
|
|
g.removeControl('two');
|
|
|
|
expect(g.value).toEqual({'one': '1'});
|
|
expect(g.valid).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('errors', () => {
|
|
it('should run the validator when the value changes', () => {
|
|
var simpleValidator = (c: any /** TODO #9100 */) =>
|
|
c.controls['one'].value != 'correct' ? {'broken': true} : null;
|
|
|
|
var c = new FormControl(null);
|
|
var g = new FormGroup({'one': c}, null, simpleValidator);
|
|
|
|
c.updateValue('correct');
|
|
|
|
expect(g.valid).toEqual(true);
|
|
expect(g.errors).toEqual(null);
|
|
|
|
c.updateValue('incorrect');
|
|
|
|
expect(g.valid).toEqual(false);
|
|
expect(g.errors).toEqual({'broken': true});
|
|
});
|
|
});
|
|
|
|
describe('dirty', () => {
|
|
var c: FormControl, g: FormGroup;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('value');
|
|
g = new FormGroup({'one': c});
|
|
});
|
|
|
|
it('should be false after creating a control', () => { expect(g.dirty).toEqual(false); });
|
|
|
|
it('should be true after changing the value of the control', () => {
|
|
c.markAsDirty();
|
|
|
|
expect(g.dirty).toEqual(true);
|
|
});
|
|
});
|
|
|
|
|
|
describe('touched', () => {
|
|
var c: FormControl, g: FormGroup;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('value');
|
|
g = new FormGroup({'one': c});
|
|
});
|
|
|
|
it('should be false after creating a control', () => { expect(g.touched).toEqual(false); });
|
|
|
|
it('should be true after control is marked as touched', () => {
|
|
c.markAsTouched();
|
|
|
|
expect(g.touched).toEqual(true);
|
|
});
|
|
});
|
|
|
|
describe('updateValue', () => {
|
|
let c: FormControl, c2: FormControl, g: FormGroup;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('');
|
|
c2 = new FormControl('');
|
|
g = new FormGroup({'one': c, 'two': c2});
|
|
});
|
|
|
|
it('should update its own value', () => {
|
|
g.updateValue({'one': 'one', 'two': 'two'});
|
|
expect(g.value).toEqual({'one': 'one', 'two': 'two'});
|
|
});
|
|
|
|
it('should update child values', () => {
|
|
g.updateValue({'one': 'one', 'two': 'two'});
|
|
expect(c.value).toEqual('one');
|
|
expect(c2.value).toEqual('two');
|
|
});
|
|
|
|
it('should update parent values', () => {
|
|
const form = new FormGroup({'parent': g});
|
|
g.updateValue({'one': 'one', 'two': 'two'});
|
|
expect(form.value).toEqual({'parent': {'one': 'one', 'two': 'two'}});
|
|
});
|
|
|
|
it('should ignore fields that are missing from supplied value', () => {
|
|
g.updateValue({'one': 'one'});
|
|
expect(g.value).toEqual({'one': 'one', 'two': ''});
|
|
});
|
|
|
|
it('should not ignore fields that are null', () => {
|
|
g.updateValue({'one': null});
|
|
expect(g.value).toEqual({'one': null, 'two': ''});
|
|
});
|
|
|
|
it('should throw if a value is provided for a missing control', () => {
|
|
expect(() => g.updateValue({
|
|
'three': 'three'
|
|
})).toThrowError(new RegExp(`Cannot find form control with name: three`));
|
|
});
|
|
|
|
describe('updateValue() events', () => {
|
|
let form: FormGroup;
|
|
let logger: any[];
|
|
|
|
beforeEach(() => {
|
|
form = new FormGroup({'parent': g});
|
|
logger = [];
|
|
});
|
|
|
|
it('should emit one valueChange event per control', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
g.valueChanges.subscribe(() => logger.push('group'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
|
|
g.updateValue({'one': 'one', 'two': 'two'});
|
|
expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
|
|
});
|
|
|
|
it('should not emit valueChange events for skipped controls', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
g.valueChanges.subscribe(() => logger.push('group'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
|
|
g.updateValue({'one': 'one'});
|
|
expect(logger).toEqual(['control1', 'group', 'form']);
|
|
});
|
|
|
|
it('should emit one statusChange event per 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'));
|
|
|
|
g.updateValue({'one': 'one', 'two': 'two'});
|
|
expect(logger).toEqual(['control1', 'control2', 'group', 'form']);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('reset()', () => {
|
|
let c: FormControl, c2: FormControl, g: FormGroup;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('initial value');
|
|
c2 = new FormControl('');
|
|
g = new FormGroup({'one': c, 'two': c2});
|
|
});
|
|
|
|
it('should set its own value if value passed', () => {
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset({'one': 'initial value', 'two': ''});
|
|
expect(g.value).toEqual({'one': 'initial value', 'two': ''});
|
|
});
|
|
|
|
it('should clear its own value if no value passed', () => {
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset();
|
|
expect(g.value).toEqual({'one': null, 'two': null});
|
|
});
|
|
|
|
it('should set the value of each of its child controls if value passed', () => {
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset({'one': 'initial value', 'two': ''});
|
|
expect(c.value).toBe('initial value');
|
|
expect(c2.value).toBe('');
|
|
});
|
|
|
|
it('should clear the value of each of its child controls if no value passed', () => {
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset();
|
|
expect(c.value).toBe(null);
|
|
expect(c2.value).toBe(null);
|
|
});
|
|
|
|
it('should set the value of its parent if value passed', () => {
|
|
const form = new FormGroup({'g': g});
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset({'one': 'initial value', 'two': ''});
|
|
expect(form.value).toEqual({'g': {'one': 'initial value', 'two': ''}});
|
|
});
|
|
|
|
it('should clear the value of its parent if no value passed', () => {
|
|
const form = new FormGroup({'g': g});
|
|
g.updateValue({'one': 'new value', 'two': 'new value'});
|
|
|
|
g.reset();
|
|
expect(form.value).toEqual({'g': {'one': null, 'two': null}});
|
|
});
|
|
|
|
it('should mark itself as pristine', () => {
|
|
g.markAsDirty();
|
|
expect(g.pristine).toBe(false);
|
|
|
|
g.reset();
|
|
expect(g.pristine).toBe(true);
|
|
});
|
|
|
|
it('should mark all child controls as pristine', () => {
|
|
c.markAsDirty();
|
|
c2.markAsDirty();
|
|
expect(c.pristine).toBe(false);
|
|
expect(c2.pristine).toBe(false);
|
|
|
|
g.reset();
|
|
expect(c.pristine).toBe(true);
|
|
expect(c2.pristine).toBe(true);
|
|
});
|
|
|
|
it('should mark the parent as pristine if all siblings pristine', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'g': g, 'c3': c3});
|
|
|
|
g.markAsDirty();
|
|
expect(form.pristine).toBe(false);
|
|
|
|
g.reset();
|
|
expect(form.pristine).toBe(true);
|
|
});
|
|
|
|
it('should not mark the parent pristine if any dirty siblings', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'g': g, 'c3': c3});
|
|
|
|
g.markAsDirty();
|
|
c3.markAsDirty();
|
|
expect(form.pristine).toBe(false);
|
|
|
|
g.reset();
|
|
expect(form.pristine).toBe(false);
|
|
});
|
|
|
|
it('should mark itself as untouched', () => {
|
|
g.markAsTouched();
|
|
expect(g.untouched).toBe(false);
|
|
|
|
g.reset();
|
|
expect(g.untouched).toBe(true);
|
|
});
|
|
|
|
it('should mark all child controls as untouched', () => {
|
|
c.markAsTouched();
|
|
c2.markAsTouched();
|
|
expect(c.untouched).toBe(false);
|
|
expect(c2.untouched).toBe(false);
|
|
|
|
g.reset();
|
|
expect(c.untouched).toBe(true);
|
|
expect(c2.untouched).toBe(true);
|
|
});
|
|
|
|
it('should mark the parent untouched if all siblings untouched', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'g': g, 'c3': c3});
|
|
|
|
g.markAsTouched();
|
|
expect(form.untouched).toBe(false);
|
|
|
|
g.reset();
|
|
expect(form.untouched).toBe(true);
|
|
});
|
|
|
|
it('should not mark the parent untouched if any touched siblings', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'g': g, 'c3': c3});
|
|
|
|
g.markAsTouched();
|
|
c3.markAsTouched();
|
|
expect(form.untouched).toBe(false);
|
|
|
|
g.reset();
|
|
expect(form.untouched).toBe(false);
|
|
});
|
|
|
|
describe('reset() events', () => {
|
|
let form: FormGroup, c3: FormControl, logger: any[];
|
|
|
|
beforeEach(() => {
|
|
c3 = new FormControl('');
|
|
form = new FormGroup({'g': g, 'c3': c3});
|
|
logger = [];
|
|
});
|
|
|
|
it('should emit one valueChange event per reset control', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
g.valueChanges.subscribe(() => logger.push('group'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
c3.valueChanges.subscribe(() => logger.push('control3'));
|
|
|
|
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();
|
|
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;
|
|
|
|
beforeEach(() => {
|
|
c1 = new FormControl('old1');
|
|
c2 = new FormControl('old2');
|
|
g = new FormGroup({'one': c1, 'two': c2}, {'two': true});
|
|
});
|
|
|
|
it('should fire an event after the value has been updated',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
ObservableWrapper.subscribe(g.valueChanges, (value) => {
|
|
expect(g.value).toEqual({'one': 'new1', 'two': 'old2'});
|
|
expect(value).toEqual({'one': 'new1', 'two': 'old2'});
|
|
async.done();
|
|
});
|
|
c1.updateValue('new1');
|
|
}));
|
|
|
|
it('should fire an event after the control\'s observable fired an event',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
var controlCallbackIsCalled = false;
|
|
|
|
ObservableWrapper.subscribe(
|
|
c1.valueChanges, (value) => { controlCallbackIsCalled = true; });
|
|
|
|
ObservableWrapper.subscribe(g.valueChanges, (value) => {
|
|
expect(controlCallbackIsCalled).toBe(true);
|
|
async.done();
|
|
});
|
|
|
|
c1.updateValue('new1');
|
|
}));
|
|
|
|
it('should fire an event when a control is excluded',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
ObservableWrapper.subscribe(g.valueChanges, (value) => {
|
|
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');
|
|
|
|
ObservableWrapper.subscribe(g.valueChanges, (value) => {
|
|
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 */ = [];
|
|
|
|
ObservableWrapper.subscribe(g.valueChanges, (value) => {
|
|
loggedValues.push(value);
|
|
|
|
if (loggedValues.length == 2) {
|
|
expect(loggedValues).toEqual([
|
|
{'one': 'new1', 'two': 'old2'}, {'one': 'new1', 'two': 'new2'}
|
|
]);
|
|
async.done();
|
|
}
|
|
});
|
|
|
|
c1.updateValue('new1');
|
|
c2.updateValue('new2');
|
|
}));
|
|
|
|
xit('should not fire an event when an excluded control is updated',
|
|
inject(
|
|
[AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
// hard to test without hacking zones
|
|
}));
|
|
});
|
|
|
|
describe('statusChanges', () => {
|
|
const control = new FormControl('', asyncValidatorReturningObservable);
|
|
const group = new FormGroup({'one': control});
|
|
|
|
// TODO(kara): update these tests to use fake Async
|
|
it('should fire a statusChange if child has async validation change',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
const loggedValues: string[] = [];
|
|
ObservableWrapper.subscribe(group.statusChanges, (status: string) => {
|
|
loggedValues.push(status);
|
|
if (loggedValues.length === 2) {
|
|
expect(loggedValues).toEqual(['PENDING', 'INVALID']);
|
|
}
|
|
async.done();
|
|
});
|
|
control.updateValue('');
|
|
}));
|
|
});
|
|
|
|
describe('getError', () => {
|
|
it('should return the error when it is present', () => {
|
|
var c = new FormControl('', Validators.required);
|
|
var 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});
|
|
expect(c.getError('invalid')).toEqual(null);
|
|
expect(g.getError('required', ['one'])).toEqual(null);
|
|
expect(g.getError('required', ['invalid'])).toEqual(null);
|
|
});
|
|
});
|
|
|
|
describe('asyncValidator', () => {
|
|
it('should run the async validator', fakeAsync(() => {
|
|
var c = new FormControl('value');
|
|
var g = new FormGroup({'one': c}, null, null, asyncValidator('expected'));
|
|
|
|
expect(g.pending).toEqual(true);
|
|
|
|
tick(1);
|
|
|
|
expect(g.errors).toEqual({'async': true});
|
|
expect(g.pending).toEqual(false);
|
|
}));
|
|
|
|
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});
|
|
|
|
expect(g.pending).toEqual(true);
|
|
|
|
tick(1);
|
|
|
|
expect(g.pending).toEqual(false);
|
|
}));
|
|
|
|
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'));
|
|
|
|
tick(1);
|
|
|
|
expect(g.errors).toEqual({'async': true});
|
|
expect(g.find(['one']).errors).toEqual({'async': true});
|
|
}));
|
|
})
|
|
});
|
|
|
|
describe('FormArray', () => {
|
|
describe('adding/removing', () => {
|
|
var a: FormArray;
|
|
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */, c3: any /** TODO #9100 */;
|
|
|
|
beforeEach(() => {
|
|
a = new FormArray([]);
|
|
c1 = new FormControl(1);
|
|
c2 = new FormControl(2);
|
|
c3 = new FormControl(3);
|
|
});
|
|
|
|
it('should support pushing', () => {
|
|
a.push(c1);
|
|
expect(a.length).toEqual(1);
|
|
expect(a.controls).toEqual([c1]);
|
|
});
|
|
|
|
it('should support removing', () => {
|
|
a.push(c1);
|
|
a.push(c2);
|
|
a.push(c3);
|
|
|
|
a.removeAt(1);
|
|
|
|
expect(a.controls).toEqual([c1, c3]);
|
|
});
|
|
|
|
it('should support inserting', () => {
|
|
a.push(c1);
|
|
a.push(c3);
|
|
|
|
a.insert(1, c2);
|
|
|
|
expect(a.controls).toEqual([c1, c2, c3]);
|
|
});
|
|
});
|
|
|
|
describe('value', () => {
|
|
it('should be the reduced value of the child controls', () => {
|
|
var 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([]);
|
|
expect(a.value).toEqual([]);
|
|
});
|
|
});
|
|
|
|
describe('updateValue', () => {
|
|
let c: FormControl, c2: FormControl, a: FormArray;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('');
|
|
c2 = new FormControl('');
|
|
a = new FormArray([c, c2]);
|
|
});
|
|
|
|
it('should update its own value', () => {
|
|
a.updateValue(['one', 'two']);
|
|
expect(a.value).toEqual(['one', 'two']);
|
|
});
|
|
|
|
it('should update child values', () => {
|
|
a.updateValue(['one', 'two']);
|
|
expect(c.value).toEqual('one');
|
|
expect(c2.value).toEqual('two');
|
|
});
|
|
|
|
it('should update parent values', () => {
|
|
const form = new FormGroup({'parent': a});
|
|
a.updateValue(['one', 'two']);
|
|
expect(form.value).toEqual({'parent': ['one', 'two']});
|
|
});
|
|
|
|
it('should ignore fields that are missing from supplied value', () => {
|
|
a.updateValue([, 'two']);
|
|
expect(a.value).toEqual(['', 'two']);
|
|
});
|
|
|
|
it('should not ignore fields that are null', () => {
|
|
a.updateValue([null]);
|
|
expect(a.value).toEqual([null, '']);
|
|
});
|
|
|
|
it('should throw if a value is provided for a missing control', () => {
|
|
expect(() => a.updateValue([
|
|
, , 'three'
|
|
])).toThrowError(new RegExp(`Cannot find form control at index 2`));
|
|
});
|
|
|
|
describe('updateValue() events', () => {
|
|
let form: FormGroup;
|
|
let logger: any[];
|
|
|
|
beforeEach(() => {
|
|
form = new FormGroup({'parent': a});
|
|
logger = [];
|
|
});
|
|
|
|
it('should emit one valueChange event per control', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
a.valueChanges.subscribe(() => logger.push('array'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
|
|
a.updateValue(['one', 'two']);
|
|
expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
|
|
});
|
|
|
|
it('should not emit valueChange events for skipped controls', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
a.valueChanges.subscribe(() => logger.push('array'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
|
|
a.updateValue(['one']);
|
|
expect(logger).toEqual(['control1', 'array', 'form']);
|
|
});
|
|
|
|
it('should emit one statusChange event per control', () => {
|
|
form.statusChanges.subscribe(() => logger.push('form'));
|
|
a.statusChanges.subscribe(() => logger.push('array'));
|
|
c.statusChanges.subscribe(() => logger.push('control1'));
|
|
c2.statusChanges.subscribe(() => logger.push('control2'));
|
|
|
|
a.updateValue(['one', 'two']);
|
|
expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('reset()', () => {
|
|
let c: FormControl, c2: FormControl, a: FormArray;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('initial value');
|
|
c2 = new FormControl('');
|
|
a = new FormArray([c, c2]);
|
|
});
|
|
|
|
it('should set its own value if value passed', () => {
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset(['initial value', '']);
|
|
expect(a.value).toEqual(['initial value', '']);
|
|
});
|
|
|
|
|
|
it('should clear its own value if no value passed', () => {
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset();
|
|
expect(a.value).toEqual([null, null]);
|
|
});
|
|
|
|
it('should set the value of each of its child controls if value passed', () => {
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset(['initial value', '']);
|
|
expect(c.value).toBe('initial value');
|
|
expect(c2.value).toBe('');
|
|
});
|
|
|
|
it('should clear the value of each of its child controls if no value', () => {
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset();
|
|
expect(c.value).toBe(null);
|
|
expect(c2.value).toBe(null);
|
|
});
|
|
|
|
it('should set the value of its parent if value passed', () => {
|
|
const form = new FormGroup({'a': a});
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset(['initial value', '']);
|
|
expect(form.value).toEqual({'a': ['initial value', '']});
|
|
});
|
|
|
|
it('should clear the value of its parent if no value passed', () => {
|
|
const form = new FormGroup({'a': a});
|
|
a.updateValue(['new value', 'new value']);
|
|
|
|
a.reset();
|
|
expect(form.value).toEqual({'a': [null, null]});
|
|
});
|
|
|
|
it('should mark itself as pristine', () => {
|
|
a.markAsDirty();
|
|
expect(a.pristine).toBe(false);
|
|
|
|
a.reset();
|
|
expect(a.pristine).toBe(true);
|
|
});
|
|
|
|
it('should mark all child controls as pristine', () => {
|
|
c.markAsDirty();
|
|
c2.markAsDirty();
|
|
expect(c.pristine).toBe(false);
|
|
expect(c2.pristine).toBe(false);
|
|
|
|
a.reset();
|
|
expect(c.pristine).toBe(true);
|
|
expect(c2.pristine).toBe(true);
|
|
});
|
|
|
|
it('should mark the parent as pristine if all siblings pristine', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'a': a, 'c3': c3});
|
|
|
|
a.markAsDirty();
|
|
expect(form.pristine).toBe(false);
|
|
|
|
a.reset();
|
|
expect(form.pristine).toBe(true);
|
|
});
|
|
|
|
it('should not mark the parent pristine if any dirty siblings', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'a': a, 'c3': c3});
|
|
|
|
a.markAsDirty();
|
|
c3.markAsDirty();
|
|
expect(form.pristine).toBe(false);
|
|
|
|
a.reset();
|
|
expect(form.pristine).toBe(false);
|
|
});
|
|
|
|
it('should mark itself as untouched', () => {
|
|
a.markAsTouched();
|
|
expect(a.untouched).toBe(false);
|
|
|
|
a.reset();
|
|
expect(a.untouched).toBe(true);
|
|
});
|
|
|
|
it('should mark all child controls as untouched', () => {
|
|
c.markAsTouched();
|
|
c2.markAsTouched();
|
|
expect(c.untouched).toBe(false);
|
|
expect(c2.untouched).toBe(false);
|
|
|
|
a.reset();
|
|
expect(c.untouched).toBe(true);
|
|
expect(c2.untouched).toBe(true);
|
|
});
|
|
|
|
it('should mark the parent untouched if all siblings untouched', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'a': a, 'c3': c3});
|
|
|
|
a.markAsTouched();
|
|
expect(form.untouched).toBe(false);
|
|
|
|
a.reset();
|
|
expect(form.untouched).toBe(true);
|
|
});
|
|
|
|
it('should not mark the parent untouched if any touched siblings', () => {
|
|
const c3 = new FormControl('');
|
|
const form = new FormGroup({'a': a, 'c3': c3});
|
|
|
|
a.markAsTouched();
|
|
c3.markAsTouched();
|
|
expect(form.untouched).toBe(false);
|
|
|
|
a.reset();
|
|
expect(form.untouched).toBe(false);
|
|
});
|
|
|
|
describe('reset() events', () => {
|
|
let form: FormGroup, c3: FormControl, logger: any[];
|
|
|
|
beforeEach(() => {
|
|
c3 = new FormControl('');
|
|
form = new FormGroup({'a': a, 'c3': c3});
|
|
logger = [];
|
|
});
|
|
|
|
it('should emit one valueChange event per reset control', () => {
|
|
form.valueChanges.subscribe(() => logger.push('form'));
|
|
a.valueChanges.subscribe(() => logger.push('array'));
|
|
c.valueChanges.subscribe(() => logger.push('control1'));
|
|
c2.valueChanges.subscribe(() => logger.push('control2'));
|
|
c3.valueChanges.subscribe(() => logger.push('control3'));
|
|
|
|
a.reset();
|
|
expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
|
|
});
|
|
|
|
it('should emit one statusChange event per reset control', () => {
|
|
form.statusChanges.subscribe(() => logger.push('form'));
|
|
a.statusChanges.subscribe(() => logger.push('array'));
|
|
c.statusChanges.subscribe(() => logger.push('control1'));
|
|
c2.statusChanges.subscribe(() => logger.push('control2'));
|
|
c3.statusChanges.subscribe(() => logger.push('control3'));
|
|
|
|
a.reset();
|
|
expect(logger).toEqual(['control1', 'control2', 'array', 'form']);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('errors', () => {
|
|
it('should run the validator when the value changes', () => {
|
|
var simpleValidator = (c: any /** TODO #9100 */) =>
|
|
c.controls[0].value != 'correct' ? {'broken': true} : null;
|
|
|
|
var c = new FormControl(null);
|
|
var g = new FormArray([c], simpleValidator);
|
|
|
|
c.updateValue('correct');
|
|
|
|
expect(g.valid).toEqual(true);
|
|
expect(g.errors).toEqual(null);
|
|
|
|
c.updateValue('incorrect');
|
|
|
|
expect(g.valid).toEqual(false);
|
|
expect(g.errors).toEqual({'broken': true});
|
|
});
|
|
});
|
|
|
|
|
|
describe('dirty', () => {
|
|
var c: FormControl;
|
|
var a: FormArray;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('value');
|
|
a = new FormArray([c]);
|
|
});
|
|
|
|
it('should be false after creating a control', () => { expect(a.dirty).toEqual(false); });
|
|
|
|
it('should be true after changing the value of the control', () => {
|
|
c.markAsDirty();
|
|
|
|
expect(a.dirty).toEqual(true);
|
|
});
|
|
});
|
|
|
|
describe('touched', () => {
|
|
var c: FormControl;
|
|
var a: FormArray;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('value');
|
|
a = new FormArray([c]);
|
|
});
|
|
|
|
it('should be false after creating a control', () => { expect(a.touched).toEqual(false); });
|
|
|
|
it('should be true after child control is marked as touched', () => {
|
|
c.markAsTouched();
|
|
|
|
expect(a.touched).toEqual(true);
|
|
});
|
|
});
|
|
|
|
|
|
describe('pending', () => {
|
|
var c: FormControl;
|
|
var a: FormArray;
|
|
|
|
beforeEach(() => {
|
|
c = new FormControl('value');
|
|
a = new FormArray([c]);
|
|
});
|
|
|
|
it('should be false after creating a control', () => {
|
|
expect(c.pending).toEqual(false);
|
|
expect(a.pending).toEqual(false);
|
|
});
|
|
|
|
it('should be true after changing the value of the control', () => {
|
|
c.markAsPending();
|
|
|
|
expect(c.pending).toEqual(true);
|
|
expect(a.pending).toEqual(true);
|
|
});
|
|
|
|
it('should not update the parent when onlySelf = true', () => {
|
|
c.markAsPending({onlySelf: true});
|
|
|
|
expect(c.pending).toEqual(true);
|
|
expect(a.pending).toEqual(false);
|
|
});
|
|
});
|
|
|
|
describe('valueChanges', () => {
|
|
var a: FormArray;
|
|
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
|
|
|
|
beforeEach(() => {
|
|
c1 = new FormControl('old1');
|
|
c2 = new FormControl('old2');
|
|
a = new FormArray([c1, c2]);
|
|
});
|
|
|
|
it('should fire an event after the value has been updated',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
ObservableWrapper.subscribe(a.valueChanges, (value) => {
|
|
expect(a.value).toEqual(['new1', 'old2']);
|
|
expect(value).toEqual(['new1', 'old2']);
|
|
async.done();
|
|
});
|
|
c1.updateValue('new1');
|
|
}));
|
|
|
|
it('should fire an event after the control\'s observable fired an event',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
var controlCallbackIsCalled = false;
|
|
|
|
ObservableWrapper.subscribe(
|
|
c1.valueChanges, (value) => { controlCallbackIsCalled = true; });
|
|
|
|
ObservableWrapper.subscribe(a.valueChanges, (value) => {
|
|
expect(controlCallbackIsCalled).toBe(true);
|
|
async.done();
|
|
});
|
|
|
|
c1.updateValue('new1');
|
|
}));
|
|
|
|
it('should fire an event when a control is removed',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
ObservableWrapper.subscribe(a.valueChanges, (value) => {
|
|
expect(value).toEqual(['old1']);
|
|
async.done();
|
|
});
|
|
|
|
a.removeAt(1);
|
|
}));
|
|
|
|
it('should fire an event when a control is added',
|
|
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
|
|
a.removeAt(1);
|
|
|
|
ObservableWrapper.subscribe(a.valueChanges, (value) => {
|
|
expect(value).toEqual(['old1', 'old2']);
|
|
async.done();
|
|
});
|
|
|
|
a.push(c2);
|
|
}));
|
|
});
|
|
|
|
describe('find', () => {
|
|
it('should return null when path is null', () => {
|
|
var g = new FormGroup({});
|
|
expect(g.find(null)).toEqual(null);
|
|
});
|
|
|
|
it('should return null when path is empty', () => {
|
|
var g = new FormGroup({});
|
|
expect(g.find([])).toEqual(null);
|
|
});
|
|
|
|
it('should return null when path is invalid', () => {
|
|
var g = new FormGroup({});
|
|
expect(g.find(['one', 'two'])).toEqual(null);
|
|
});
|
|
|
|
it('should return a child of a control group', () => {
|
|
var g = new FormGroup({
|
|
'one': new FormControl('111'),
|
|
'nested': new FormGroup({'two': new FormControl('222')})
|
|
});
|
|
|
|
expect(g.find(['nested', 'two']).value).toEqual('222');
|
|
expect(g.find(['one']).value).toEqual('111');
|
|
expect(g.find('nested/two').value).toEqual('222');
|
|
expect(g.find('one').value).toEqual('111');
|
|
});
|
|
|
|
it('should return an element of an array', () => {
|
|
var g = new FormGroup({'array': new FormArray([new FormControl('111')])});
|
|
|
|
expect(g.find(['array', 0]).value).toEqual('111');
|
|
});
|
|
});
|
|
|
|
describe('asyncValidator', () => {
|
|
it('should run the async validator', fakeAsync(() => {
|
|
var c = new FormControl('value');
|
|
var g = new FormArray([c], null, asyncValidator('expected'));
|
|
|
|
expect(g.pending).toEqual(true);
|
|
|
|
tick(1);
|
|
|
|
expect(g.errors).toEqual({'async': true});
|
|
expect(g.pending).toEqual(false);
|
|
}));
|
|
})
|
|
});
|
|
});
|
|
}
|