diff --git a/aio/content/translations/cn/api-plan.md b/aio/content/translations/cn/api-plan.md index 49ca9ef9d4..d2566406c7 100644 --- a/aio/content/translations/cn/api-plan.md +++ b/aio/content/translations/cn/api-plan.md @@ -53,7 +53,7 @@ [x] | forms/FormBuilder | 0.37 [x] | common/http/HttpParams | 0.35 [x] | core/OnChanges | 0.35 -[ ] | forms/FormControlName | 0.34 +[x] | forms/FormControlName | 0.34 [x] | core/Output | 0.33 [ ] | common/http/HttpInterceptor | 0.30 [ ] | common/http/HttpRequest | 0.29 diff --git a/packages/forms/src/directives/reactive_directives/form_control_name.ts b/packages/forms/src/directives/reactive_directives/form_control_name.ts index 66cfa050e7..ed90b88d29 100644 --- a/packages/forms/src/directives/reactive_directives/form_control_name.ts +++ b/packages/forms/src/directives/reactive_directives/form_control_name.ts @@ -33,55 +33,96 @@ export const controlNameBinding: any = { * Syncs a `FormControl` in an existing `FormGroup` to a form control * element by name. * + * 根据名字将现有 `FormGroup` 中的 `FormControl` 与一个表单控件进行同步。 + * * This directive ensures that any values written to the `FormControl` * instance programmatically will be written to the DOM element (model -> view). Conversely, * any values written to the DOM element through user input will be reflected in the * `FormControl` instance (view -> model). * + * 该指令会确保通过程序写入到该 `FormControl` 实例的任何值都会被写入到 DOM 元素上(模型 -> 视图)。 + * 反过来,任何通过用户输入写入 DOM 元素上的值也会被反映到这个 `FormControl` 实例上(视图 -> 模型)。 + * * This directive is designed to be used with a parent `FormGroupDirective` (selector: * `[formGroup]`). * + * 该指令旨在与父级 `FormGroupDirective`(选择器:`[formGroup]`)协同使用。 + * * It accepts the string name of the `FormControl` instance you want to * link, and will look for a `FormControl` registered with that name in the * closest `FormGroup` or `FormArray` above it. * + * 它接受一个想要链接的 `FormControl` 实例的字符串名称,它会在最近的父级 `FormGroup`、`FormArray` 上根据该名称查找这个 `FormControl`。 + * * **Access the control**: You can access the `FormControl` associated with * this directive by using the {@link AbstractControl#get get} method. * Ex: `this.form.get('first');` * + * **访问控件**:你可以使用 {@link AbstractControl#get get} 方法访问与此指令关联的`FormControl`。 + * 例如:`this.form.get('first');` + * * **Get value**: the `value` property is always synced and available on the `FormControl`. * See a full list of available properties in `AbstractControl`. * + * **获取值**:这个 `value` 属性会一直和这个 `FormControl` 保持同步,并一直可用。 + * 参见 `AbstractControl` 的所有可用属性的列表。 + * * **Set value**: You can set an initial value for the control when instantiating the * `FormControl`, or you can set it programmatically later using * {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue patchValue}. * + * **设置值**:当初始化 `FormControl` 时,可以为该控件设置一个初始值; + * 或者稍后也可以使用 {@link AbstractControl#setValue setValue} 或 {@link AbstractControl#patchValue patchValue} 来通过代码设置它。 + * * **Listen to value**: If you want to listen to changes in the value of the control, you can * subscribe to the {@link AbstractControl#valueChanges valueChanges} event. You can also listen to * {@link AbstractControl#statusChanges statusChanges} to be notified when the validation status is * re-calculated. * + * **监听值的变化**:如果想监听控件值的变化,你可以订阅 {@link AbstractControl#valueChanges valueChanges} 事件。 + * 你还可以监听 {@link AbstractControl#statusChanges statusChanges} 以便在验证状态重新计算时得到通知。 + * * ### Example * + * ### 例子 + * * In this example, we create form controls for first name and last name. * + * 在这个例子中,我们为名和姓创建了两个表单控件。 + * * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'} * * To see `formControlName` examples with different form control types, see: * + * 要查看把 `formControlName` 应用于不同类型的表单控件的例子,参见: + * * * Radio buttons: `RadioControlValueAccessor` + * + * 单选按钮: `RadioControlValueAccessor` + * * * Selects: `SelectControlValueAccessor` * + * 单选下拉框: `SelectControlValueAccessor` + * * **npm package**: `@angular/forms` * + * **npm 包**: `@angular/forms` + * * **NgModule**: `ReactiveFormsModule` * * ### Use with ngModel * + * ### 和 ngModel 一起使用 + * * Support for using the `ngModel` input property and `ngModelChange` event with reactive * form directives has been deprecated in Angular v6 and will be removed in Angular v7. * + * 从 Angular v6 开始,已经废弃了在响应式表单中使用使用输入属性 `ngModel` 和事件 `ngModelChange` 的方式,并将在 Angular v7 中移除。 + * * Now deprecated: + * + * 现已废弃: + * * ```html *