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

feat(forms): remove support for declaring forms in html

Browse Source
This commit is contained in:
vsavkin
2015-02-23 15:26:53 -08:00
parent ded83e589b
commit a73c643322
3 changed files with 53 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
modules/angular2/test/forms/integration_spec.js vendored
View File

@ -15,10 +15,10 @@ import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {Injector} from 'angular2/di';
import {Component, Decorator, Template} from 'angular2/core';
import {ControlGroupDirective, ControlNameDirective,
ControlDirective, NewControlGroupDirective,
Control, ControlGroup, ControlValueAccessor,
RequiredValidatorDirective} from 'angular2/forms';
import {ControlGroupDirective, ControlDirective, Control, ControlGroup,
ControlValueAccessor, RequiredValidatorDirective} from 'angular2/forms';
import * as validators from 'angular2/src/forms/validators';
export function main() {
function detectChanges(view) {
@ -42,8 +42,7 @@ export function main() {
tplResolver.setTemplate(componentType, new Template({
inline: template,
directives: [ControlGroupDirective, ControlNameDirective, ControlDirective,
NewControlGroupDirective, WrappedValue]
directives: [ControlGroupDirective, ControlDirective, WrappedValue]
}));
compiler.compile(componentType).then((pv) => {
@ -61,7 +60,7 @@ export function main() {
}));
var t = `<div [control-group]="form">
<input type="text" control-name="login">
<input type="text" control="login">
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -78,7 +77,7 @@ export function main() {
var ctx = new MyComp(form);
var t = `<div [control-group]="form">
<input type="text" control-name="login">
<input type="text" control="login">
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -99,7 +98,7 @@ export function main() {
var ctx = new MyComp(form);
var t = `<div [control-group]="form">
<input type="text" control-name="login">
<input type="text" control="login">
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -121,7 +120,7 @@ export function main() {
}), "one");
var t = `<div [control-group]="form">
<input type="text" [control-name]="name">
<input type="text" [control]="name">
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -141,7 +140,7 @@ export function main() {
var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
var t = `<div [control-group]="form">
<input type="checkbox" control-name="checkbox">
<input type="checkbox" control="checkbox">
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -160,7 +159,7 @@ export function main() {
var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
var t = `<div [control-group]="form">
<input type="text" control-name="name" wrapped-value>
<input type="text" control="name" wrapped-value>
</div>`;
compile(MyComp, t, ctx, (view) => {
@ -176,48 +175,37 @@ export function main() {
});
});
describe("declarative forms", () => {
it("should initialize dom elements", (done) => {
var t = `<div [new-control-group]="{'login': 'loginValue', 'password':'passValue'}">
<input type="text" id="login" control="login">
<input type="password" id="password" control="password">
</div>`;
describe("validations", () => {
it("should use validators defined in html",(done) => {
var form = new ControlGroup({"login": new Control("aa")});
var ctx = new MyComp(form);
compile(MyComp, t, new MyComp(), (view) => {
var loginInput = queryView(view, "#login")
expect(loginInput.value).toEqual("loginValue");
var t = `<div [control-group]="form">
<input type="text" control="login" required>
</div>`;
var passInput = queryView(view, "#password")
expect(passInput.value).toEqual("passValue");
compile(MyComp, t, ctx, (view) => {
expect(form.valid).toEqual(true);
done();
});
});
var input = queryView(view, "input");
it("should update the control group values on DOM change", (done) => {
var t = `<div #form [new-control-group]="{'login': 'loginValue'}">
<input type="text" control="login">
</div>`;
compile(MyComp, t, new MyComp(), (view) => {
var input = queryView(view, "input")
input.value = "updatedValue";
input.value = "";
dispatchEvent(input, "change");
var form = view.contextWithLocals.get("form");
expect(form.value).toEqual({'login': 'updatedValue'});
expect(form.valid).toEqual(false);
done();
});
});
it("should support validators",(done) => {
var t = `<div #form [new-control-group]="{'login': 'loginValue'}">
<input type="text" control="login" required>
</div>`;
it("should use validators defined in the model",(done) => {
var form = new ControlGroup({"login": new Control("aa", validators.required)});
var ctx = new MyComp(form);
compile(MyComp, t, new MyComp(), (view) => {
var form = view.contextWithLocals.get("form");
var t = `<div [control-group]="form">
<input type="text" control="login">
</div>`;
compile(MyComp, t, ctx, (view) => {
expect(form.valid).toEqual(true);
var input = queryView(view, "input");
@ -236,12 +224,6 @@ export function main() {
@Component({
selector: "my-comp"
})
@Template({
inline: "",
directives: [ControlGroupDirective, ControlNameDirective,
ControlDirective, NewControlGroupDirective, RequiredValidatorDirective,
WrappedValue]
})
class MyComp {
form:ControlGroup;
name:string;
@ -266,7 +248,7 @@ class WrappedValueAccessor extends ControlValueAccessor {
selector:'[wrapped-value]'
})
class WrappedValue {
constructor(cd:ControlNameDirective) {
constructor(cd:ControlDirective) {
cd.valueAccessor = new WrappedValueAccessor();
}
}