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

docs(forms): fix reactive forms api examples (#10701)

This commit is contained in:
Kara 2016-08-11 21:20:39 -07:00 committed by vikerman
parent 50345b8c36
commit 5d59c6e80f
5 changed files with 46 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts
View File

@ -24,8 +24,9 @@ export const formControlBinding: any = {
}; };
/** /**
* Binds an existing {@link FormControl} to a DOM element. * Binds an existing {@link FormControl} to a DOM element. It requires importing the {@link
** * ReactiveFormsModule}.
*
* In this example, we bind the control to an input element. When the value of the input 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 * changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change. * control changes, the input element reflects that change.
@ -43,7 +44,6 @@ export const formControlBinding: any = {
* </form> * </form>
* </div> * </div>
* `, * `,
* directives: [REACTIVE_FORM_DIRECTIVES]
* }) * })
* export class App { * export class App {
* loginControl: FormControl = new FormControl(''); * loginControl: FormControl = new FormControl('');
@ -52,17 +52,21 @@ export const formControlBinding: any = {
* *
* ### ngModel * ### ngModel
* *
* We can also use `ngModel` to bind a domain model to the form. * We can also set the value of the form programmatically with setValue().
** **
* ```typescript * ```typescript
* @Component({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [formControl]='loginControl' [(ngModel)]='login'>" * template: "<input type='text' [formControl]='loginControl'>"
* }) * })
* class LoginComp { * class LoginComp {
* loginControl: FormControl = new FormControl(''); * loginControl: FormControl = new FormControl('');
* login:string; *
* populate() {
* this.loginControl.setValue('some login');
* }
*
* } * }
* ``` * ```
* *

27
modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts
View File

@ -30,7 +30,8 @@ export const controlNameBinding: any = {
/** /**
* Syncs an existing form control with the specified name to a DOM element. * Syncs an existing form control with the specified name to a DOM element.
* *
* This directive can only be used as a child of {@link FormGroupDirective}. * This directive can only be used as a child of {@link FormGroupDirective}. It also requires
* importing the {@link ReactiveFormsModule}.
* ### Example * ### Example
* *
@ -41,7 +42,6 @@ export const controlNameBinding: any = {
* ``` * ```
* @Component({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: ` * template: `
* <form [formGroup]="myForm" (submit)="onLogIn()"> * <form [formGroup]="myForm" (submit)="onLogIn()">
* Login <input type="text" formControlName="login"> * Login <input type="text" formControlName="login">
@ -51,8 +51,8 @@ export const controlNameBinding: any = {
* </form> * </form>
* `}) * `})
* class LoginComp { * class LoginComp {
* loginCtrl = new Control(); * loginCtrl = new FormControl();
* passwordCtrl = new Control(); * passwordCtrl = new FormControl();
* myForm = new FormGroup({ * myForm = new FormGroup({
* login: loginCtrl, * login: loginCtrl,
* password: passwordCtrl * password: passwordCtrl
@ -63,29 +63,28 @@ export const controlNameBinding: any = {
* } * }
* ``` * ```
* *
* TODO(kara): Remove ngModel example with reactive paradigm * We can also set the value of the form programmatically using setValue().
* 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({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: ` * template: `
* <form [formGroup]="myForm" (submit)='onLogIn()'> * <form [formGroup]="myForm" (submit)='onLogIn()'>
* Login <input type='text' formControlName='login' [(ngModel)]="credentials.login"> * Login <input type='text' formControlName='login'>
* Password <input type='password' formControlName='password' * Password <input type='password' formControlName='password'>
* [(ngModel)]="credentials.password">
* <button type='submit'>Log in!</button> * <button type='submit'>Log in!</button>
* </form> * </form>
* `}) * `})
* class LoginComp { * class LoginComp {
* credentials: {login:string, password:string};
* myForm = new FormGroup({ * myForm = new FormGroup({
* login: new Control(this.credentials.login), * login: new FormControl(),
* password: new Control(this.credentials.password) * password: new FormControl()
* }); * });
* *
* populate() {
* this.myForm.setValue({login: 'some login', password: 'some password'});
* }
*
* onLogIn(): void { * onLogIn(): void {
* // this.credentials.login === "some login" * // this.credentials.login === "some login"
* // this.credentials.password === "some password" * // this.credentials.password === "some password"

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

@ -27,9 +27,8 @@ export const formDirectiveProvider: any = {
}; };
/** /**
* Binds an existing form group to a DOM element. * Binds an existing form group to a DOM element. It requires importing the {@link
* * ReactiveFormsModule}.
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
* *
* In this example, we bind the form group to the form element, and we bind the login and * In this example, we bind the form group to the form element, and we bind the login and
* password controls to the login and password elements. * password controls to the login and password elements.
@ -45,10 +44,9 @@ export const formDirectiveProvider: any = {
* <p>Password: <input type="password" formControlName="password"></p> * <p>Password: <input type="password" formControlName="password"></p>
* </form> * </form>
* <p>Value:</p> * <p>Value:</p>
* <pre>{{value}}</pre> * <pre>{{ loginForm.value | json}}</pre>
* </div> * </div>
* `, * `
* directives: [REACTIVE_FORM_DIRECTIVES]
* }) * })
* export class App { * export class App {
* loginForm: FormGroup; * loginForm: FormGroup;
@ -60,37 +58,35 @@ export const formDirectiveProvider: any = {
* }); * });
* } * }
* *
* get value(): string {
* return JSON.stringify(this.loginForm.value, null, 2);
* }
* } * }
* ``` * ```
* *
* We can also use ngModel to bind a domain model to the form. * We can also use setValue() to populate the form programmatically.
* *
* ```typescript * ```typescript
* @Component({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: ` * template: `
* <form [formGroup]='loginForm'> * <form [formGroup]='loginForm'>
* Login <input type='text' formControlName='login' [(ngModel)]='credentials.login'> * Login <input type='text' formControlName='login'>
* Password <input type='password' formControlName='password' * Password <input type='password' formControlName='password'>
* [(ngModel)]='credentials.password'>
* <button (click)="onLogin()">Login</button> * <button (click)="onLogin()">Login</button>
* </form>` * </form>`
* }) * })
* class LoginComp { * class LoginComp {
* credentials: {login: string, password: string};
* loginForm: FormGroup; * loginForm: FormGroup;
* *
* constructor() { * constructor() {
* this.loginForm = new FormGroup({ * this.loginForm = new FormGroup({
* login: new FormControl(""), * login: new FormControl(''),
* password: new FormControl("") * password: new FormControl('')
* }); * });
* } * }
* *
* populate() {
* this.loginForm.setValue({ login: 'some login', password: 'some password'});
* }
*
* onLogin(): void { * onLogin(): void {
* // this.credentials.login === 'some login' * // this.credentials.login === 'some login'
* // this.credentials.password === 'some password' * // this.credentials.password === 'some password'

18
modules/@angular/forms/src/directives/reactive_directives/form_group_name.ts
View File

@ -26,7 +26,8 @@ export const formGroupNameProvider: any = {
/** /**
* Syncs an existing form group to a DOM element. * Syncs an existing form group to a DOM element.
* *
* This directive can only be used as a child of {@link FormGroupDirective}. * This directive can only be used as a child of {@link FormGroupDirective}. It also requires
* importing the {@link ReactiveFormsModule}.
* *
* ```typescript * ```typescript
* @Component({ * @Component({
@ -42,8 +43,8 @@ export const formGroupNameProvider: any = {
* <p>Last: <input formControlName="last"></p> * <p>Last: <input formControlName="last"></p>
* </div> * </div>
* <h3>Name value:</h3> * <h3>Name value:</h3>
* <pre>{{ nameGroup | json }}</pre> * <pre>{{ myForm.get('name') | json }}</pre>
* <p>Name is {{nameGroup?.valid ? "valid" : "invalid"}}</p> * <p>Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}</p>
* <h3>What's your favorite food?</h3> * <h3>What's your favorite food?</h3>
* <p><input formControlName="food"></p> * <p><input formControlName="food"></p>
* <h3>Form value</h3> * <h3>Form value</h3>
@ -53,14 +54,12 @@ export const formGroupNameProvider: any = {
* ` * `
* }) * })
* export class App { * export class App {
* nameGroup = new FormGroup({ * myForm = new FormGroup({
* name: new FormGroup({
* first: new FormControl('', Validators.required), * first: new FormControl('', Validators.required),
* middle: new FormControl(''), * middle: new FormControl(''),
* last: new FormControl('', Validators.required) * last: new FormControl('', Validators.required)
* }); * }),
*
* myForm = new FormGroup({
* name: this.nameGroup,
* food: new FormControl() * food: new FormControl()
* }); * });
* } * }
@ -101,7 +100,8 @@ export const formArrayNameProvider: any = {
/** /**
* Syncs an existing form array to a DOM element. * Syncs an existing form array to a DOM element.
* *
* This directive can only be used as a child of {@link FormGroupDirective}. * This directive can only be used as a child of {@link FormGroupDirective}. It also requires
* importing the {@link ReactiveFormsModule}.
* *
* ```typescript * ```typescript
* @Component({ * @Component({

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

@ -466,7 +466,6 @@ export class FormControl extends AbstractControl {
* along with {@link FormControl} and {@link FormArray}. {@link FormArray} can also contain other * along with {@link FormControl} and {@link FormArray}. {@link FormArray} can also contain other
* controls, but is of variable length. * controls, but is of variable length.
* *
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
* *
* @experimental * @experimental
*/ */
@ -651,7 +650,6 @@ export class FormGroup extends AbstractControl {
* the `FormArray` directly, as that will result in strange and unexpected behavior such * the `FormArray` directly, as that will result in strange and unexpected behavior such
* as broken change detection. * as broken change detection.
* *
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
* *
* @experimental * @experimental
*/ */