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
* changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change.
@ -43,7 +44,6 @@ export const formControlBinding: any = {
* </form>
* </div>
* `,
* directives: [REACTIVE_FORM_DIRECTIVES]
* })
* export class App {
* loginControl: FormControl = new FormControl('');
@ -52,17 +52,21 @@ export const formControlBinding: any = {
*
* ### 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
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [formControl]='loginControl' [(ngModel)]='login'>"
* template: "<input type='text' [formControl]='loginControl'>"
* })
* class LoginComp {
* 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.
*
* 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
*
@ -41,7 +42,6 @@ export const controlNameBinding: any = {
* ```
* @Component({
* selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form [formGroup]="myForm" (submit)="onLogIn()">
* Login <input type="text" formControlName="login">
@ -51,8 +51,8 @@ export const controlNameBinding: any = {
* </form>
* `})
* class LoginComp {
* loginCtrl = new Control();
* passwordCtrl = new Control();
* loginCtrl = new FormControl();
* passwordCtrl = new FormControl();
* myForm = new FormGroup({
* login: loginCtrl,
* password: passwordCtrl
@ -63,29 +63,28 @@ export const controlNameBinding: any = {
* }
* ```
*
* 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.
* We can also set the value of the form programmatically using setValue().
*
* ```
* @Component({
* selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form [formGroup]="myForm" (submit)='onLogIn()'>
* Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
* Password <input type='password' formControlName='password'
* [(ngModel)]="credentials.password">
* Login <input type='text' formControlName='login'>
* Password <input type='password' formControlName='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)
* login: new FormControl(),
* password: new FormControl()
* });
*
* populate() {
* this.myForm.setValue({login: 'some login', password: 'some password'});
* }
*
* onLogIn(): void {
* // this.credentials.login === "some login"
* // 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.
*
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
* Binds an existing form group to a DOM element. It requires importing the {@link
* ReactiveFormsModule}.
*
* 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.
@ -45,10 +44,9 @@ export const formDirectiveProvider: any = {
* <p>Password: <input type="password" formControlName="password"></p>
* </form>
* <p>Value:</p>
* <pre>{{value}}</pre>
* <pre>{{ loginForm.value | json}}</pre>
* </div>
* `,
* directives: [REACTIVE_FORM_DIRECTIVES]
* `
* })
* export class App {
* 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
* @Component({
* selector: "login-comp",
* directives: [REACTIVE_FORM_DIRECTIVES],
* template: `
* <form [formGroup]='loginForm'>
* Login <input type='text' formControlName='login' [(ngModel)]='credentials.login'>
* Password <input type='password' formControlName='password'
* [(ngModel)]='credentials.password'>
* Login <input type='text' formControlName='login'>
* Password <input type='password' formControlName='password'>
* <button (click)="onLogin()">Login</button>
* </form>`
* })
* class LoginComp {
* credentials: {login: string, password: string};
* loginForm: FormGroup;
*
* constructor() {
* this.loginForm = new FormGroup({
* login: new FormControl(""),
* password: new FormControl("")
* login: new FormControl(''),
* password: new FormControl('')
* });
* }
*
* populate() {
* this.loginForm.setValue({ login: 'some login', password: 'some password'});
* }
*
* onLogin(): void {
* // this.credentials.login === 'some login'
* // 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.
*
* 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
* @Component({
@ -42,8 +43,8 @@ export const formGroupNameProvider: any = {
* <p>Last: <input formControlName="last"></p>
* </div>
* <h3>Name value:</h3>
* <pre>{{ nameGroup | json }}</pre>
* <p>Name is {{nameGroup?.valid ? "valid" : "invalid"}}</p>
* <pre>{{ myForm.get('name') | json }}</pre>
* <p>Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}</p>
* <h3>What's your favorite food?</h3>
* <p><input formControlName="food"></p>
* <h3>Form value</h3>
@ -53,14 +54,12 @@ export const formGroupNameProvider: any = {
* `
* })
* export class App {
* nameGroup = new FormGroup({
* myForm = new FormGroup({
* name: new FormGroup({
* first: new FormControl('', Validators.required),
* middle: new FormControl(''),
* last: new FormControl('', Validators.required)
* });
*
* myForm = new FormGroup({
* name: this.nameGroup,
* }),
* food: new FormControl()
* });
* }
@ -101,7 +100,8 @@ export const formArrayNameProvider: any = {
/**
* 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
* @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
* controls, but is of variable length.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/
@ -651,7 +650,6 @@ export class FormGroup extends AbstractControl {
* the `FormArray` directly, as that will result in strange and unexpected behavior such
* as broken change detection.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/