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: ` *
* `}) * 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: ` * * `}) * 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: ` * ` * }) * 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:
* *{{ nameGroup | json }}- *
Name is {{nameGroup?.valid ? "valid" : "invalid"}}
+ *{{ myForm.get('name') | json }}+ *
Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}
*