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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

58
modules/@angular/forms/test/reactive_integration_spec.ts
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',

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

@ -10,7 +10,7 @@ import {NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed, TestComponentBuilder, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {AsyncTestCompleter, afterEach, beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {FormsModule, NgForm} from '@angular/forms';
import {FormsModule, NgForm, NgModelGroup} 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';
@ -366,6 +366,57 @@ export function main() {
});
}));
it('should set status classes with ngModelGroup and ngForm',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<form>
<div ngModelGroup="person">
<input [(ngModel)]="name" required name="name">
</div>
</form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.name = '';
fixture.detectChanges();
const form = fixture.debugElement.query(By.css('form')).nativeElement;
const modelGroup =
fixture.debugElement.query(By.directive(NgModelGroup)).nativeElement;
const input = fixture.debugElement.query(By.css('input')).nativeElement;
// ngModelGroup creates its control asynchronously
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(sortedClassList(modelGroup)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-untouched'
]);
expect(sortedClassList(form)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-untouched'
]);
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(sortedClassList(modelGroup)).toEqual([
'ng-invalid', 'ng-pristine', 'ng-touched'
]);
expect(sortedClassList(form)).toEqual(['ng-invalid', 'ng-pristine', 'ng-touched']);
input.value = 'updatedValue';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(sortedClassList(modelGroup)).toEqual([
'ng-dirty', 'ng-touched', 'ng-valid'
]);
expect(sortedClassList(form)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
});
async.done();
});
}));
it('should mark controls as dirty before emitting a value change event',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {