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"}}
*