60af19f0e1
Closes #3573 BREAKING CHANGE Rename: - `appComponentTypeToken` => `APP_COMPONENT` - `coreDirectives` => `CORE_DIRECTIVES` - `formDirectives` => `FORM_DIRECTIVES` - `formInjectables` => `FORM_BINDINGS` - `httpInjectables` => `HTTP_BINDINGS` - `jsonpInjectables` => `JSONP_BINDINGS` - `PROTO_CHANGE_DETECTOR_KEY` => `PROTO_CHANGE_DETECTOR` - `appComponentRefPromiseToken` => `APP_COMPONENT_REF_PROMISE` - `appComponentTypeToken` => `APP_COMPONENT` - `undefinedValue` => `UNDEFINED` - `formDirectives` => `FORM_DIRECTIVES` - `DOCUMENT_TOKEN` => `DOCUMENT` - `APP_ID_TOKEN` => `APP_ID` - `MAX_IN_MEMORY_ELEMENTS_PER_TEMPLATE_TOKEN` => `MAX_IN_MEMORY_ELEMENTS_PER_TEMPLATE` - `appBaseHrefToken` => `APP_BASE_HREF`
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import {Directive, LifecycleEvent} from 'angular2/annotations';
|
|
import {Inject, Host, SkipSelf, forwardRef, Binding} from 'angular2/di';
|
|
import {List, ListWrapper} from 'angular2/src/facade/collection';
|
|
import {CONST_EXPR} from 'angular2/src/facade/lang';
|
|
|
|
import {ControlContainer} from './control_container';
|
|
import {controlPath} from './shared';
|
|
import {ControlGroup} from '../model';
|
|
import {Form} from './form_interface';
|
|
|
|
const controlGroupBinding =
|
|
CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)}));
|
|
|
|
/**
|
|
* Creates and binds a control group to a DOM element.
|
|
*
|
|
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
|
|
*
|
|
* # Example
|
|
*
|
|
* In this example, we create the credentials and personal control groups.
|
|
* We can work with each group separately: check its validity, get its value, listen to its changes.
|
|
*
|
|
* ```
|
|
* @Component({selector: "signup-comp"})
|
|
* @View({
|
|
* directives: [FORM_DIRECTIVES],
|
|
* template: `
|
|
* <form #f="form" (submit)='onSignUp(f.value)'>
|
|
* <div ng-control-group='credentials' #credentials="form">
|
|
* Login <input type='text' ng-control='login'>
|
|
* Password <input type='password' ng-control='password'>
|
|
* </div>
|
|
* <div *ng-if="!credentials.valid">Credentials are invalid</div>
|
|
*
|
|
* <div ng-control-group='personal'>
|
|
* Name <input type='text' ng-control='name'>
|
|
* </div>
|
|
* <button type='submit'>Sign Up!</button>
|
|
* </form>
|
|
* `})
|
|
* class SignupComp {
|
|
* onSignUp(value) {
|
|
* // value === {personal: {name: 'some name'},
|
|
* // credentials: {login: 'some login', password: 'some password'}}
|
|
* }
|
|
* }
|
|
*
|
|
* ```
|
|
*/
|
|
@Directive({
|
|
selector: '[ng-control-group]',
|
|
bindings: [controlGroupBinding],
|
|
properties: ['name: ng-control-group'],
|
|
lifecycle: [LifecycleEvent.onInit, LifecycleEvent.onDestroy],
|
|
exportAs: 'form'
|
|
})
|
|
export class NgControlGroup extends ControlContainer {
|
|
_parent: ControlContainer;
|
|
constructor(@Host() @SkipSelf() _parent: ControlContainer) {
|
|
super();
|
|
this._parent = _parent;
|
|
}
|
|
|
|
onInit() { this.formDirective.addControlGroup(this); }
|
|
|
|
onDestroy() { this.formDirective.removeControlGroup(this); }
|
|
|
|
get control(): ControlGroup { return this.formDirective.getControlGroup(this); }
|
|
|
|
get path(): List<string> { return controlPath(this.name, this._parent); }
|
|
|
|
get formDirective(): Form { return this._parent.formDirective; }
|
|
}
|