iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(forms): rename ngControl to formControlName

This commit is contained in:
Kara Erickson 2016-06-12 13:17:07 -07:00
parent 1f6fd3c8fc
commit 2b8d12ddf0
18 changed files with 183 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/@angular/common/src/forms.ts
View File

@ -22,10 +22,10 @@ export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_ac
export {ControlContainer} from './forms/directives/control_container';
export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_value_accessor';
export {DefaultValueAccessor} from './forms/directives/default_value_accessor';
export {FormControlName} from './forms/directives/form_control_name';
export {Form} from './forms/directives/form_interface';
export {NgControl} from './forms/directives/ng_control';
export {NgControlGroup} from './forms/directives/ng_control_group';
export {NgControlName} from './forms/directives/ng_control_name';
export {NgControlStatus} from './forms/directives/ng_control_status';
export {NgForm} from './forms/directives/ng_form';
export {NgModel} from './forms/directives/ng_model';

8
modules/@angular/common/src/forms/directives.ts
View File

@ -2,8 +2,8 @@ import {Type} from '@angular/core';
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
import {DefaultValueAccessor} from './directives/default_value_accessor';
import {FormControlName} from './directives/form_control_name';
import {NgControlGroup} from './directives/ng_control_group';
import {NgControlName} from './directives/ng_control_name';
import {NgControlStatus} from './directives/ng_control_status';
import {NgForm} from './directives/ng_form';
import {NgModel} from './directives/ng_model';
@ -18,9 +18,9 @@ import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
export {ControlValueAccessor} from './directives/control_value_accessor';
export {DefaultValueAccessor} from './directives/default_value_accessor';
export {FormControlName} from './directives/form_control_name';
export {NgControl} from './directives/ng_control';
export {NgControlGroup} from './directives/ng_control_group';
export {NgControlName} from './directives/ng_control_name';
export {NgControlStatus} from './directives/ng_control_status';
export {NgForm} from './directives/ng_form';
export {NgModel} from './directives/ng_model';
@ -52,7 +52,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
* @experimental
*/
export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
NgControlName, NgControlGroup,
NgControlGroup,
NgModel, NgForm,
@ -64,4 +64,4 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
];
export const REACTIVE_FORM_DIRECTIVES: Type[] =
/*@ts2dart_const*/[FormControlDirective, FormGroupDirective];
/*@ts2dart_const*/[FormControlDirective, FormGroupDirective, FormControlName];

4
modules/@angular/common/src/forms/directives/checkbox_value_accessor.ts
View File

@ -13,14 +13,14 @@ export const CHECKBOX_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
*
* ### Example
* ```
* <input type="checkbox" ngControl="rememberLogin">
* <input type="checkbox" name="rememberLogin" ngModel>
* ```
*
* @experimental
*/
@Directive({
selector:
'input[type=checkbox][ngControl],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
providers: [CHECKBOX_VALUE_ACCESSOR]
})

6
modules/@angular/common/src/forms/directives/default_value_accessor.ts
View File

@ -13,18 +13,18 @@ export const DEFAULT_VALUE_ACCESSOR: any = /*@ts2dart_const*/
/**
* The default accessor for writing a value and listening to changes that is used by the
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
*
* ### Example
* ```
* <input type="text" ngControl="searchQuery">
* <input type="text" name="searchQuery" ngModel>
* ```
*
* @experimental
*/
@Directive({
selector:
'input:not([type=checkbox])[ngControl],textarea[ngControl],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
// TODO: vsavkin replace the above selector with the one below it once
// https://github.com/angular/angular/issues/3011 is implemented
// selector: '[ngControl],[ngModel],[ngFormControl]',

60
modules/@angular/common/src/forms/directives/ng_control_name.ts → modules/@angular/common/src/forms/directives/form_control_name.ts
View File

@ -1,4 +1,4 @@
import {Directive, Host, Inject, OnChanges, OnDestroy, Optional, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {FormControl} from '../model';
@ -14,7 +14,7 @@ import {AsyncValidatorFn, ValidatorFn} from './validators';
export const controlNameBinding: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ {
provide: NgControl,
useExisting: forwardRef(() => NgControlName)
useExisting: forwardRef(() => FormControlName)
};
/**
@ -31,39 +31,50 @@ export const controlNameBinding: any =
* ```
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form #f="ngForm" (submit)='onLogIn(f.value)'>
* Login <input type='text' ngControl='login' #l="ngForm">
* <div *ngIf="!l.valid">Login is invalid</div>
*
* Password <input type='password' ngControl='password'>
* <button type='submit'>Log in!</button>
* <form [formGroup]="myForm" (submit)="onLogIn()">
* Login <input type="text" formControlName="login">
* <div *ngIf="!loginCtrl.valid">Login is invalid</div>
* Password <input type="password" formControlName="password">
* <button type="submit">Log in!</button>
* </form>
* `})
* class LoginComp {
* onLogIn(value): void {
* loginCtrl = new Control();
* passwordCtrl = new Control();
* myForm = new FormGroup({
* login: loginCtrl,
* password: passwordCtrl
* });
* onLogIn(): void {
* // value === {login: 'some login', password: 'some password'}
* }
* }
* ```
*
* We can also use ngModel to bind a domain model to the form.
* TODO(kara): Remove ngModel example with reactive paradigm
* We can also use ngModel to bind a domain model to the form, if you don't want to provide
* individual init values to each control.
*
* ```
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form (submit)='onLogIn()'>
* Login <input type='text' ngControl='login' [(ngModel)]="credentials.login">
* Password <input type='password' ngControl='password'
* <form [formGroup]="myForm" (submit)='onLogIn()'>
* Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
* Password <input type='password' formControlName='password'
* [(ngModel)]="credentials.password">
* <button type='submit'>Log in!</button>
* </form>
* `})
* class LoginComp {
* credentials: {login:string, password:string};
* myForm = new FormGroup({
* login: new Control(this.credentials.login),
* password: new Control(this.credentials.password)
* });
*
* onLogIn(): void {
* // this.credentials.login === "some login"
@ -74,21 +85,18 @@ export const controlNameBinding: any =
*
* @experimental
*/
@Directive({
selector: '[ngControl]',
providers: [controlNameBinding],
inputs: ['name: ngControl', 'model: ngModel'],
outputs: ['update: ngModelChange'],
exportAs: 'ngForm'
})
export class NgControlName extends NgControl implements OnChanges,
OnDestroy {
@Directive({selector: '[formControlName]', providers: [controlNameBinding]})
export class FormControlName extends NgControl implements OnChanges, OnDestroy {
/** @internal */
update = new EventEmitter();
model: any;
viewModel: any;
private _added = false;
@Input('formControlName') name: string;
// TODO(kara): Replace ngModel with reactive API
@Input('ngModel') model: any;
@Output('ngModelChange') update = new EventEmitter();
constructor(@Host() @SkipSelf() private _parent: ControlContainer,
@Optional() @Self() @Inject(NG_VALIDATORS) private _validators:
/* Array<Validator|Function> */ any[],

8
modules/@angular/common/src/forms/directives/ng_control_group.ts
View File

@ -28,15 +28,15 @@ export const controlGroupProvider: any =
* <form #f="ngForm">
* <div ngControlGroup="name" #cgName="ngForm">
* <h3>Enter your name:</h3>
* <p>First: <input ngControl="first" required></p>
* <p>Middle: <input ngControl="middle"></p>
* <p>Last: <input ngControl="last" required></p>
* <p>First: <input name="first" ngModel required></p>
* <p>Middle: <input name="middle" ngModel></p>
* <p>Last: <input name="last" ngModel required></p>
* </div>
* <h3>Name value:</h3>
* <pre>{{valueOf(cgName)}}</pre>
* <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
* <h3>What's your favorite food?</h3>
* <p><input ngControl="food"></p>
* <p><input name="food" ngModel></p>
* <h3>Form value</h3>
* <pre>{{valueOf(f)}}</pre>
* </form>

2
modules/@angular/common/src/forms/directives/ng_control_status.ts
View File

@ -12,7 +12,7 @@ import {NgControl} from './ng_control';
* @experimental
*/
@Directive({
selector: '[ngControl],[ngModel],[formControl]',
selector: '[formControlName],[ngModel],[formControl]',
host: {
'[class.ng-untouched]': 'ngClassUntouched',
'[class.ng-touched]': 'ngClassTouched',

12
modules/@angular/common/src/forms/directives/ng_form.ts
View File

@ -35,8 +35,6 @@ export const formDirectiveProvider: any =
*
* The `ngSubmit` event signals when the user triggers a form submission.
*
* ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
*
* ```typescript
* @Component({
* selector: 'my-app',
@ -47,13 +45,13 @@ export const formDirectiveProvider: any =
* <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3>
* <div ngControlGroup="credentials">
* <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p>
* <p>Login: <input type="text" name="login" ngModel></p>
* <p>Password: <input type="password" name="password" ngModel></p>
* </div>
* <h3>Control group: person</h3>
* <div ngControlGroup="person">
* <p>First name: <input type="text" ngControl="firstName"></p>
* <p>Last name: <input type="text" ngControl="lastName"></p>
* <p>First name: <input type="text" name="firstName" ngModel></p>
* <p>Last name: <input type="text" name="lastName" ngModel></p>
* </div>
* <button type="submit">Submit Form</button>
* <p>Form data submitted:</p>
@ -61,7 +59,7 @@ export const formDirectiveProvider: any =
* <pre>{{data}}</pre>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* directives: []
* })
* export class App {
* constructor() {}

2
modules/@angular/common/src/forms/directives/ng_model.ts
View File

@ -41,7 +41,7 @@ export const formControlBinding: any =
* @experimental
*/
@Directive({
selector: '[ngModel]:not([ngControl]):not([formControl])',
selector: '[ngModel]:not([formControlName]):not([formControl])',
providers: [formControlBinding],
exportAs: 'ngForm'
})

4
modules/@angular/common/src/forms/directives/number_value_accessor.ts
View File

@ -12,7 +12,7 @@ export const NUMBER_VALUE_ACCESSOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider
/**
* The accessor for writing a number value and listening to changes that is used by the
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
*
* ### Example
* ```
@ -21,7 +21,7 @@ export const NUMBER_VALUE_ACCESSOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider
*/
@Directive({
selector:
'input[type=number][ngControl],input[type=number][formControl],input[type=number][ngModel]',
'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',

4
modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts
View File

@ -60,7 +60,7 @@ export class RadioButtonState {
/**
* The accessor for writing a radio control value and listening to changes that is used by the
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
*
* ### Example
* ```
@ -78,7 +78,7 @@ export class RadioButtonState {
*/
@Directive({
selector:
'input[type=radio][ngControl],input[type=radio][formControl],input[type=radio][ngModel]',
'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
providers: [RADIO_VALUE_ACCESSOR]
})

12
modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
View File

@ -34,14 +34,14 @@ export const formDirectiveProvider: any =
* <div>
* <h2>Binding an existing form group</h2>
* <form [formGroup]="loginForm">
* <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p>
* <p>Login: <input type="text" formControlName="login"></p>
* <p>Password: <input type="password" formControlName="password"></p>
* </form>
* <p>Value:</p>
* <pre>{{value}}</pre>
* </div>
* `,
* directives: [FORM_DIRECTIVES]
* directives: [REACTIVE_FORM_DIRECTIVES]
* })
* export class App {
* loginForm: FormGroup;
@ -64,11 +64,11 @@ export const formDirectiveProvider: any =
* ```typescript
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form [formGroup]='loginForm'>
* Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
* Password <input type='password' ngControl='password'
* Login <input type='text' formControlName='login' [(ngModel)]='credentials.login'>
* Password <input type='password' formControlName='password'
* [(ngModel)]='credentials.password'>
* <button (click)="onLogin()">Login</button>
* </form>`

4
modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
View File

@ -33,7 +33,7 @@ function _extractId(valueString: string): string {
*/
@Directive({
selector:
'select:not([multiple])[ngControl],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
providers: [SELECT_VALUE_ACCESSOR]
})
@ -87,7 +87,7 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
* ### Example
*
* ```
* <select ngControl="city">
* <select name="city" ngModel>
* <option *ngFor="let c of cities" [value]="c"></option>
* </select>
* ```

5
modules/@angular/common/src/forms/directives/select_multiple_control_value_accessor.ts
View File

@ -38,7 +38,8 @@ abstract class HTMLCollection {
* The accessor for writing a value and listening to changes on a select element.
*/
@Directive({
selector: 'select[multiple][ngControl],select[multiple][formControl],select[multiple][ngModel]',
selector:
'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
host: {'(input)': 'onChange($event.target)', '(blur)': 'onTouched()'},
providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
})
@ -118,7 +119,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
* ### Example
*
* ```
* <select multiple ngControl="city">
* <select multiple name="city" ngModel>
* <option *ngFor="let c of cities" [value]="c"></option>
* </select>
* ```

17
modules/@angular/common/src/forms/directives/validators.ts
View File

@ -40,13 +40,13 @@ export const REQUIRED_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/
* ### Example
*
* ```
* <input ngControl="fullName" required>
* <input name="fullName" ngModel required>
* ```
*
* @experimental
*/
@Directive({
selector: '[required][ngControl],[required][formControl],[required][ngModel]',
selector: '[required][formControlName],[required][formControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR]
})
export class RequiredValidator {
@ -71,13 +71,13 @@ export const MIN_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
};
/**
* A directive which installs the {@link MinLengthValidator} for any `ngControl`,
* A directive which installs the {@link MinLengthValidator} for any `formControlName`,
* `formControl`, or control with `ngModel` that also has a `minlength` attribute.
*
* @experimental
*/
@Directive({
selector: '[minlength][ngControl],[minlength][formControl],[minlength][ngModel]',
selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
})
export class MinLengthValidator implements Validator {
@ -104,13 +104,14 @@ export const MAX_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
};
/**
* A directive which installs the {@link MaxLengthValidator} for any `ngControl, `formControl`,
* A directive which installs the {@link MaxLengthValidator} for any `formControlName,
* `formControl`,
* or control with `ngModel` that also has a `maxlength` attribute.
*
* @experimental
*/
@Directive({
selector: '[maxlength][ngControl],[maxlength][formControl],[maxlength][ngModel]',
selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
providers: [MAX_LENGTH_VALIDATOR]
})
export class MaxLengthValidator implements Validator {
@ -140,12 +141,12 @@ export const PATTERN_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/ {
* ### Example
*
* ```
* <input [ngControl]="fullName" pattern="[a-zA-Z ]*">
* <input [name]="fullName" pattern="[a-zA-Z ]*" ngModel>
* ```
* @experimental
*/
@Directive({
selector: '[pattern][ngControl],[pattern][formControl],[pattern][ngModel]',
selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
providers: [PATTERN_VALIDATOR]
})
export class PatternValidator implements Validator {

9
modules/@angular/common/src/forms/form_builder.ts
View File

@ -14,19 +14,18 @@ import * as modelModule from './model';
* ```typescript
* @Component({
* selector: 'my-app',
* viewProviders: [FORM_BINDINGS]
* template: `
* <form [formGroup]="loginForm">
* <p>Login <input ngControl="login"></p>
* <p>Login <input formControlName="login"></p>
* <div ngControlGroup="passwordRetry">
* <p>Password <input type="password" ngControl="password"></p>
* <p>Confirm password <input type="password" ngControl="passwordConfirmation"></p>
* <p>Password <input type="password" formControlName="password"></p>
* <p>Confirm password <input type="password" formControlName="passwordConfirmation"></p>
* </div>
* </form>
* <h3>Form value:</h3>
* <pre>{{value}}</pre>
* `,
* directives: [FORM_DIRECTIVES]
* directives: [REACTIVE_FORM_DIRECTIVES]
* })
* export class App {
* loginForm: FormGroup;

14
modules/@angular/common/test/forms/directives_spec.ts
View File

@ -4,7 +4,7 @@ import {fakeAsync, flushMicrotasks, Log, tick,} from '@angular/core/testing';
import {SpyNgControl, SpyValueAccessor} from '../spies';
import {FormGroup, FormControl, NgControlName, NgControlGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {FormGroup, FormControl, FormControlName, NgControlGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared';
@ -119,7 +119,7 @@ export function main() {
});
form.form = formModel;
loginControlDir = new NgControlName(
loginControlDir = new FormControlName(
form, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
loginControlDir.name = 'login';
loginControlDir.valueAccessor = new DummyControlValueAccessor();
@ -138,7 +138,7 @@ export function main() {
describe('addControl', () => {
it('should throw when no control found', () => {
var dir = new NgControlName(form, null, null, [defaultAccessor]);
var dir = new FormControlName(form, null, null, [defaultAccessor]);
dir.name = 'invalidName';
expect(() => form.addControl(dir))
@ -146,7 +146,7 @@ export function main() {
});
it('should throw when no value accessor', () => {
var dir = new NgControlName(form, null, null, null);
var dir = new FormControlName(form, null, null, null);
dir.name = 'login';
expect(() => form.addControl(dir))
@ -274,7 +274,7 @@ export function main() {
personControlGroupDir = new NgControlGroup(form, [], []);
personControlGroupDir.name = 'person';
loginControlDir = new NgControlName(personControlGroupDir, null, null, [defaultAccessor]);
loginControlDir = new FormControlName(personControlGroupDir, null, null, [defaultAccessor]);
loginControlDir.name = 'login';
loginControlDir.valueAccessor = new DummyControlValueAccessor();
});
@ -440,7 +440,7 @@ export function main() {
}));
});
describe('NgControlName', () => {
describe('FormControlName', () => {
var formModel: any /** TODO #9100 */;
var controlNameDir: any /** TODO #9100 */;
@ -449,7 +449,7 @@ export function main() {
var parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'name': formModel});
controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
controlNameDir = new FormControlName(parent, [], [], [defaultAccessor]);
controlNameDir.name = 'name';
});

184
modules/@angular/common/test/forms/integration_spec.ts
View File

@ -1,5 +1,5 @@
import {NgFor, NgIf} from '@angular/common';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, FormGroupDirective, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, REACTIVE_FORM_DIRECTIVES, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {ComponentFixture} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
@ -23,7 +23,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -42,7 +42,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -59,7 +59,7 @@ export function main() {
var form = new FormGroup({'login': new FormControl('oldValue')});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -82,7 +82,7 @@ export function main() {
var form = new FormGroup({'login': new FormControl('oldValue')});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -201,7 +201,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -227,7 +227,7 @@ export function main() {
var form = new FormGroup({'login': login});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -252,7 +252,7 @@ export function main() {
var form = new FormGroup({'login': login});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -276,7 +276,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="text" ngControl="text">
<input type="text" formControlName="text">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -300,7 +300,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input ngControl="text">
<input formControlName="text">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -323,7 +323,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<textarea ngControl="text"></textarea>
<textarea formControlName="text"></textarea>
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -347,7 +347,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="checkbox" ngControl="checkbox">
<input type="checkbox" formControlName="checkbox">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -373,7 +373,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="number" ngControl="num">
<input type="number" formControlName="num">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -397,7 +397,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="number" ngControl="num" required>
<input type="number" formControlName="num" required>
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -428,7 +428,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'num': new FormControl(10)});
const t = `<div [formGroup]="form">
<input type="number" ngControl="num" [(ngModel)]="data">
<input type="number" formControlName="num" [(ngModel)]="data">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -448,8 +448,8 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<form [formGroup]="form">
<input type="radio" ngControl="foodChicken" name="food">
<input type="radio" ngControl="foodFish" name="food">
<input type="radio" formControlName="foodChicken" name="food">
<input type="radio" formControlName="foodFish" name="food">
</form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -524,7 +524,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<select ngControl="city">
<select formControlName="city">
<option value="SF"></option>
<option value="NYC"></option>
</select>
@ -556,7 +556,7 @@ export function main() {
it('with a dynamic list of options',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<div [formGroup]="form">
<select ngControl="city">
<select formControlName="city">
<option *ngFor="let c of data" [value]="c"></option>
</select>
</div>`;
@ -795,7 +795,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<input type="text" ngControl="name" wrapped-value>
<input type="text" formControlName="name" wrapped-value>
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -818,7 +818,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<my-input ngControl="name"></my-input>
<my-input formControlName="name"></my-input>
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -853,9 +853,9 @@ export function main() {
});
const t = `<div [formGroup]="form" login-is-empty-validator>
<input type="text" ngControl="login" required>
<input type="text" ngControl="min" minlength="3">
<input type="text" ngControl="max" maxlength="3">
<input type="text" formControlName="login" required>
<input type="text" formControlName="min" minlength="3">
<input type="text" formControlName="max" maxlength="3">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -897,7 +897,7 @@ export function main() {
var form = new FormGroup({'login': new FormControl('')});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login" uniq-login-validator="expected">
<input type="text" formControlName="login" uniq-login-validator="expected">
</div>`;
var rootTC: any /** TODO #9100 */;
@ -928,7 +928,7 @@ export function main() {
var form = new FormGroup({'login': new FormControl('aa', Validators.required)});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -953,7 +953,7 @@ export function main() {
var form = new FormGroup({'login': control});
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>`;
var fixture: any /** TODO #9100 */;
@ -992,7 +992,7 @@ export function main() {
const t = `<div [formGroup]="form">
<div ngControlGroup="nested">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>
</div>`;
@ -1015,7 +1015,7 @@ export function main() {
const t = `<div [formGroup]="form">
<div ngControlGroup="nested">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>
</div>`;
@ -1038,7 +1038,7 @@ export function main() {
var form = new FormGroup({'name': new FormControl('')});
const t =
`<div [formGroup]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
`<div [formGroup]="form"><input type="text" formControlName="name" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
@ -1084,7 +1084,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<div ngControlGroup="user">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>
</form>`;
@ -1137,7 +1137,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<div *ngIf="name == 'show'">
<input type="text" ngControl="login">
<input type="text" formControlName="login">
</div>
</form>`;
@ -1162,7 +1162,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<div *ngIf="name=='show'" ngControlGroup="user">
<input type="text" ngControl="login">
<input type="text" name="login" ngModel>
</div>
</form>`;
@ -1186,7 +1186,7 @@ export function main() {
it('should support ngModel for complex forms',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="text" ngControl="name" [(ngModel)]="name">
<input type="text" name="name" [(ngModel)]="name">
</form>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
@ -1262,76 +1262,77 @@ export function main() {
}));
it('should support <type=radio>',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="radio" name="food" ngControl="chicken" [(ngModel)]="data['chicken']">
<input type="radio" name="food" ngControl="fish" [(ngModel)]="data['fish']">
<input type="radio" name="food" ngControl="beef" [(ngModel)]="data['beef']">
<input type="radio" name="food" ngControl="pork" [(ngModel)]="data['pork']">
// TODO(kara): Fix when re-doing radio buttons
xit('should support <type=radio>',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="radio" name="food" [(ngModel)]="data['chicken']">
<input type="radio" name="food" [(ngModel)]="data['fish']">
<input type="radio" name="food" [(ngModel)]="data['beef']">
<input type="radio" name="food" [(ngModel)]="data['pork']">
</form>`;
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.debugElement.componentInstance.data = {
'chicken': new RadioButtonState(false, 'chicken'),
'fish': new RadioButtonState(true, 'fish'),
'beef': new RadioButtonState(false, 'beef'),
'pork': new RadioButtonState(true, 'pork')
};
fixture.detectChanges();
tick();
fixture.debugElement.componentInstance.data = {
'chicken': new RadioButtonState(false, 'chicken'),
'fish': new RadioButtonState(true, 'fish'),
'beef': new RadioButtonState(false, 'beef'),
'pork': new RadioButtonState(true, 'pork')
};
fixture.detectChanges();
tick();
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.checked).toEqual(false);
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.checked).toEqual(false);
dispatchEvent(input.nativeElement, 'change');
tick();
dispatchEvent(input.nativeElement, 'change');
tick();
const data = fixture.debugElement.componentInstance.data;
const data = fixture.debugElement.componentInstance.data;
expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
expect(data['beef']).toEqual(new RadioButtonState(false, 'beef'));
expect(data['pork']).toEqual(new RadioButtonState(false, 'pork'));
})));
expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
expect(data['beef']).toEqual(new RadioButtonState(false, 'beef'));
expect(data['pork']).toEqual(new RadioButtonState(false, 'pork'));
})));
});
it('should support multiple named <type=radio> groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="radio" name="food" ngControl="chicken" [(ngModel)]="data['chicken']">
<input type="radio" name="food" ngControl="fish" [(ngModel)]="data['fish']">
<input type="radio" name="drink" ngControl="cola" [(ngModel)]="data['cola']">
<input type="radio" name="drink" ngControl="sprite" [(ngModel)]="data['sprite']">
xit('should support multiple named <type=radio> groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="radio" name="food" [(ngModel)]="data['chicken']">
<input type="radio" name="food" [(ngModel)]="data['fish']">
<input type="radio" name="drink" [(ngModel)]="data['cola']">
<input type="radio" name="drink" [(ngModel)]="data['sprite']">
</form>`;
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.debugElement.componentInstance.data = {
'chicken': new RadioButtonState(false, 'chicken'),
'fish': new RadioButtonState(true, 'fish'),
'cola': new RadioButtonState(false, 'cola'),
'sprite': new RadioButtonState(true, 'sprite')
};
fixture.detectChanges();
tick();
fixture.debugElement.componentInstance.data = {
'chicken': new RadioButtonState(false, 'chicken'),
'fish': new RadioButtonState(true, 'fish'),
'cola': new RadioButtonState(false, 'cola'),
'sprite': new RadioButtonState(true, 'sprite')
};
fixture.detectChanges();
tick();
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.checked).toEqual(false);
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.checked).toEqual(false);
dispatchEvent(input.nativeElement, 'change');
tick();
dispatchEvent(input.nativeElement, 'change');
tick();
const data = fixture.debugElement.componentInstance.data;
const data = fixture.debugElement.componentInstance.data;
expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
expect(data['cola']).toEqual(new RadioButtonState(false, 'cola'));
expect(data['sprite']).toEqual(new RadioButtonState(true, 'sprite'));
})));
expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
expect(data['cola']).toEqual(new RadioButtonState(false, 'cola'));
expect(data['sprite']).toEqual(new RadioButtonState(true, 'sprite'));
})));
describe('setting status classes', () => {
it('should work with single fields',
@ -1373,7 +1374,8 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'name': new FormControl('', Validators.required)});
const t = `<form [formGroup]="form"><input type="text" ngControl="name"></form>`;
const t =
`<form [formGroup]="form"><input type="text" formControlName="name"></form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
@ -1491,7 +1493,7 @@ export function main() {
// from form.control before it was set. This test verifies this bug is
// fixed.
const t = `<form><div ngControlGroup="x" #x="ngForm">
<input type="text" ngControl="test"></div>{{x.valid}}</form>`;
<input type="text" name="test" ngModel></div>{{x.valid}}</form>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.detectChanges();
@ -1583,7 +1585,7 @@ class UniqLoginValidator implements Validator {
template: '',
directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
FormControlDirective, FormGroupDirective
REACTIVE_FORM_DIRECTIVES
],
providers: [FORM_PROVIDERS]
})