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

chore(forms): rename ngFormControl to formControl

This commit is contained in:
Kara Erickson 2016-06-10 17:28:19 -07:00
parent a6e5ddc5af
commit d53edfec47
15 changed files with 53 additions and 61 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,13 +22,13 @@ 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 {FormControlDirective} from './forms/directives/form_control_directive';
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 {NgFormControl} from './forms/directives/ng_form_control';
export {NgFormModel} from './forms/directives/ng_form_model';
export {NgModel} from './forms/directives/ng_model';
export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor';

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

@ -2,11 +2,11 @@ import {Type} from '@angular/core';
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
import {DefaultValueAccessor} from './directives/default_value_accessor';
import {FormControlDirective} from './directives/form_control_directive';
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 {NgFormControl} from './directives/ng_form_control';
import {NgFormModel} from './directives/ng_form_model';
import {NgModel} from './directives/ng_model';
import {NumberValueAccessor} from './directives/number_value_accessor';
@ -18,12 +18,12 @@ 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 {FormControlDirective} from './directives/form_control_directive';
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 {NgFormControl} from './directives/ng_form_control';
export {NgFormModel} from './directives/ng_form_model';
export {NgModel} from './directives/ng_model';
export {NumberValueAccessor} from './directives/number_value_accessor';
@ -33,6 +33,7 @@ export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './dire
export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
/**
*
* A list of all the form directives used as part of a `@Component` annotation.
@ -53,7 +54,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
NgControlName, NgControlGroup,
NgFormControl, NgModel, NgFormModel, NgForm,
NgModel, NgFormModel, NgForm,
NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,

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

@ -20,7 +20,7 @@ export const CHECKBOX_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
*/
@Directive({
selector:
'input[type=checkbox][ngControl],input[type=checkbox][ngFormControl],input[type=checkbox][ngModel]',
'input[type=checkbox][ngControl],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
providers: [CHECKBOX_VALUE_ACCESSOR]
})

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

@ -13,7 +13,7 @@ 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 NgFormControl}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
*
* ### Example
* ```
@ -24,7 +24,7 @@ export const DEFAULT_VALUE_ACCESSOR: any = /*@ts2dart_const*/
*/
@Directive({
selector:
'input:not([type=checkbox])[ngControl],textarea[ngControl],input:not([type=checkbox])[ngFormControl],textarea[ngFormControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
'input:not([type=checkbox])[ngControl],textarea[ngControl],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]',

44
modules/@angular/common/src/forms/directives/ng_form_control.ts → modules/@angular/common/src/forms/directives/form_control_directive.ts
View File

@ -1,4 +1,4 @@
import {Directive, Inject, OnChanges, Optional, Self, SimpleChanges, forwardRef} from '@angular/core';
import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {StringMapWrapper} from '../../facade/collection';
@ -13,14 +13,12 @@ import {AsyncValidatorFn, ValidatorFn} from './validators';
export const formControlBinding: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ {
provide: NgControl,
useExisting: forwardRef(() => NgFormControl)
useExisting: forwardRef(() => FormControlDirective)
};
/**
* Binds an existing {@link Control} to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
*
* Binds an existing {@link FormControl} to a DOM element.
**
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change.
@ -30,54 +28,48 @@ export const formControlBinding: any =
* selector: 'my-app',
* template: `
* <div>
* <h2>NgFormControl Example</h2>
* <h2>Bind existing control example</h2>
* <form>
* <p>Element with existing control: <input type="text"
* [ngFormControl]="loginControl"></p>
* [formControl]="loginControl"></p>
* <p>Value of existing control: {{loginControl.value}}</p>
* </form>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* directives: [REACTIVE_FORM_DIRECTIVES]
* })
* export class App {
* loginControl: Control = new Control('');
* loginControl: FormControl = new FormControl('');
* }
* ```
*
* ### ngModel
*
* We can also use `ngModel` to bind a domain model to the form.
*
* ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
*
**
* ```typescript
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [ngFormControl]='loginControl' [(ngModel)]='login'>"
* template: "<input type='text' [formControl]='loginControl' [(ngModel)]='login'>"
* })
* class LoginComp {
* loginControl: Control = new Control('');
* loginControl: FormControl = new FormControl('');
* login:string;
* }
* ```
*
* @experimental
*/
@Directive({
selector: '[ngFormControl]',
providers: [formControlBinding],
inputs: ['form: ngFormControl', 'model: ngModel'],
outputs: ['update: ngModelChange'],
exportAs: 'ngForm'
})
export class NgFormControl extends NgControl implements OnChanges {
form: FormControl;
update = new EventEmitter();
model: any;
@Directive({selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm'})
export class FormControlDirective extends NgControl implements OnChanges {
viewModel: any;
@Input('formControl') form: FormControl;
@Input('ngModel') model: any;
@Output('ngModelChange') update = new EventEmitter();
constructor(@Optional() @Self() @Inject(NG_VALIDATORS) private _validators:
/* Array<Validator|Function> */ any[],
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators:

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],[ngFormControl]',
selector: '[ngControl],[ngModel],[formControl]',
host: {
'[class.ng-untouched]': 'ngClassUntouched',
'[class.ng-touched]': 'ngClassTouched',

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([ngFormControl])',
selector: '[ngModel]:not([ngControl]):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 NgFormControl}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} 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][ngFormControl],input[type=number][ngModel]',
'input[type=number][ngControl],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 NgFormControl}, and {@link NgControlName} directives.
* {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
*
* ### Example
* ```
@ -78,7 +78,7 @@ export class RadioButtonState {
*/
@Directive({
selector:
'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
'input[type=radio][ngControl],input[type=radio][formControl],input[type=radio][ngModel]',
host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
providers: [RADIO_VALUE_ACCESSOR]
})

2
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])[ngFormControl],select:not([multiple])[ngModel]',
'select:not([multiple])[ngControl],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
providers: [SELECT_VALUE_ACCESSOR]
})

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

@ -38,7 +38,7 @@ abstract class HTMLCollection {
* The accessor for writing a value and listening to changes on a select element.
*/
@Directive({
selector: 'select[multiple][ngControl],select[multiple][ngFormControl],select[multiple][ngModel]',
selector: 'select[multiple][ngControl],select[multiple][formControl],select[multiple][ngModel]',
host: {'(input)': 'onChange($event.target)', '(blur)': 'onTouched()'},
providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
})

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

@ -46,7 +46,7 @@ export const REQUIRED_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/
* @experimental
*/
@Directive({
selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
selector: '[required][ngControl],[required][formControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR]
})
export class RequiredValidator {
@ -72,12 +72,12 @@ export const MIN_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
/**
* A directive which installs the {@link MinLengthValidator} for any `ngControl`,
* `ngFormControl`, or control with `ngModel` that also has a `minlength` attribute.
* `formControl`, or control with `ngModel` that also has a `minlength` attribute.
*
* @experimental
*/
@Directive({
selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
selector: '[minlength][ngControl],[minlength][formControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
})
export class MinLengthValidator implements Validator {
@ -104,13 +104,13 @@ export const MAX_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
};
/**
* A directive which installs the {@link MaxLengthValidator} for any `ngControl, `ngFormControl`,
* A directive which installs the {@link MaxLengthValidator} for any `ngControl, `formControl`,
* or control with `ngModel` that also has a `maxlength` attribute.
*
* @experimental
*/
@Directive({
selector: '[maxlength][ngControl],[maxlength][ngFormControl],[maxlength][ngModel]',
selector: '[maxlength][ngControl],[maxlength][formControl],[maxlength][ngModel]',
providers: [MAX_LENGTH_VALIDATOR]
})
export class MaxLengthValidator implements Validator {
@ -145,7 +145,7 @@ export const PATTERN_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/ {
* @experimental
*/
@Directive({
selector: '[pattern][ngControl],[pattern][ngFormControl],[pattern][ngModel]',
selector: '[pattern][ngControl],[pattern][formControl],[pattern][ngModel]',
providers: [PATTERN_VALIDATOR]
})
export class PatternValidator implements Validator {

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

@ -264,12 +264,10 @@ export abstract class AbstractControl {
* ## Usage
*
* By default, a `FormControl` is created for every `<input>` or other form component.
* With {@link NgFormControl} or {@link NgFormModel} an existing {@link FormControl} can be
* With {@link FormControlDirective} or {@link NgFormModel} an existing {@link FormControl} can be
* bound to a DOM element instead. This `FormControl` can be configured with a custom
* validation function.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/
export class FormControl extends AbstractControl {

6
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, NgFormModel, ControlValueAccessor, Validators, NgForm, NgModel, NgFormControl, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {FormGroup, FormControl, NgControlName, NgControlGroup, NgFormModel, 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';
@ -363,7 +363,7 @@ export function main() {
});
});
describe('NgFormControl', () => {
describe('FormControlDirective', () => {
var controlDir: any /** TODO #9100 */;
var control: any /** TODO #9100 */;
var checkProperties = function(control: any /** TODO #9100 */) {
@ -378,7 +378,7 @@ export function main() {
};
beforeEach(() => {
controlDir = new NgFormControl([Validators.required], [], [defaultAccessor]);
controlDir = new FormControlDirective([Validators.required], [], [defaultAccessor]);
controlDir.valueAccessor = new DummyControlValueAccessor();
control = new FormControl(null);

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

@ -1,11 +1,11 @@
import {NgFor, NgIf} from '@angular/common';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, 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';
import {Input, Provider, forwardRef} from '@angular/core';
import {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
@ -16,7 +16,7 @@ import {ListWrapper} from '../../src/facade/collection';
import {PromiseWrapper} from '../../src/facade/promise';
export function main() {
describe('integration tests', () => {
xdescribe('integration tests', () => {
it('should initialize DOM elements with the given form object',
inject(
@ -179,7 +179,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var control = new FormControl('loginValue');
var t = `<div><input type="text" [ngFormControl]="form"></div>`;
const t = `<div><input type="text" [formControl]="form"></div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = control;
@ -1062,7 +1062,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new FormControl('');
var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
const t = `<div><input type="text" [formControl]="form" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
@ -1341,7 +1341,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormControl('', Validators.required);
var t = `<div><input type="text" [ngFormControl]="form"></div>`;
const t = `<div><input type="text" [formControl]="form"></div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
@ -1438,7 +1438,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new FormControl('');
var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
const t = `<div><input type="text" [formControl]="form" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.debugElement.componentInstance.form = form;
@ -1583,7 +1583,8 @@ class UniqLoginValidator implements Validator {
selector: 'my-comp',
template: '',
directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
FormControlDirective
],
providers: [FORM_PROVIDERS]
})