feat(forms): add control status classes to form groups (#10667)

This commit is contained in:
Kara
2016-08-11 09:01:09 -07:00
committed by vikerman
parent 7fac4efede
commit 2291929a15
6 changed files with 159 additions and 38 deletions

View File

@ -1178,11 +1178,11 @@ export function main() {
});
}));
it('should work with complex model-driven forms',
it('should work with single fields in parent forms',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'name': new FormControl('', Validators.required)});
const form = new FormGroup({'name': new FormControl('', Validators.required)});
const t =
`<form [formGroup]="form"><input type="text" formControlName="name"></form>`;
@ -1191,7 +1191,8 @@ export function main() {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input')).nativeElement;
const input = fixture.debugElement.query(By.css('input')).nativeElement;
expect(sortedClassList(input)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-untouched'
]);
@ -1211,6 +1212,57 @@ export function main() {
async.done();
});
}));
it('should work with formGroup and formGroupName',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const form = new FormGroup(
{'person': new FormGroup({'name': new FormControl('', Validators.required)})});
const t = `<form [formGroup]="form">
<div formGroupName="person">
<input type="text" formControlName="name">
</div>
</form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')).nativeElement;
const formGroup =
fixture.debugElement.query(By.css('[formGroupName]')).nativeElement;
const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
expect(sortedClassList(formGroup)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-untouched'
]);
expect(sortedClassList(formEl)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-untouched'
]);
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(sortedClassList(formGroup)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-touched'
]);
expect(sortedClassList(formEl)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-touched'
]);
input.value = 'updatedValue';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(sortedClassList(formGroup)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
expect(sortedClassList(formEl)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
async.done();
});
}));
});
it('should not update the view when the value initially came from the view',