From 5d59c6e80f0bc10f2073654c2fc32079d5761b0f Mon Sep 17 00:00:00 2001 From: Kara Date: Thu, 11 Aug 2016 21:20:39 -0700 Subject: [PATCH] docs(forms): fix reactive forms api examples (#10701) --- .../form_control_directive.ts | 18 ++++++----- .../reactive_directives/form_control_name.ts | 27 ++++++++--------- .../form_group_directive.ts | 30 ++++++++----------- .../reactive_directives/form_group_name.ts | 18 +++++------ modules/@angular/forms/src/model.ts | 2 -- 5 files changed, 46 insertions(+), 49 deletions(-) diff --git a/modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts b/modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts index 701516aa44..18d54165eb 100644 --- a/modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts +++ b/modules/@angular/forms/src/directives/reactive_directives/form_control_directive.ts @@ -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 = { * * * `, - * 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: "" + + * template: "" * }) * class LoginComp { * loginControl: FormControl = new FormControl(''); - * login:string; + * + * populate() { + * this.loginControl.setValue('some login'); + * } + * * } * ``` * diff --git a/modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts b/modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts index 63079d87d1..d9be028aaa 100644 --- a/modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts +++ b/modules/@angular/forms/src/directives/reactive_directives/form_control_name.ts @@ -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: ` *
* Login @@ -51,8 +51,8 @@ export const controlNameBinding: any = { *
* `}) * 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: ` *
- * Login - * Password + * Login + * Password * *
* `}) * 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" diff --git a/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts b/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts index e31078c9c3..a228f35184 100644 --- a/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts +++ b/modules/@angular/forms/src/directives/reactive_directives/form_group_directive.ts @@ -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 = { *

Password:

* *

Value:

- * 
{{value}}
+ * 
{{ loginForm.value | json}}
* - * `, - * 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: ` *
- * Login - * Password + * Login + * Password * *
` * }) * 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' diff --git a/modules/@angular/forms/src/directives/reactive_directives/form_group_name.ts b/modules/@angular/forms/src/directives/reactive_directives/form_group_name.ts index e979b7f734..bc190322ac 100644 --- a/modules/@angular/forms/src/directives/reactive_directives/form_group_name.ts +++ b/modules/@angular/forms/src/directives/reactive_directives/form_group_name.ts @@ -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 = { *

Last:

* *

Name value:

- * 
{{ nameGroup | json }}
- *

Name is {{nameGroup?.valid ? "valid" : "invalid"}}

+ * 
{{ myForm.get('name') | json }}
+ *

Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}

*

What's your favorite food?

*

*

Form value

@@ -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({ diff --git a/modules/@angular/forms/src/model.ts b/modules/@angular/forms/src/model.ts index 3903a5033d..cacd56bacb 100644 --- a/modules/@angular/forms/src/model.ts +++ b/modules/@angular/forms/src/model.ts @@ -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 */