填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/forms

FormControlName

根据名字将现有 FormGroup 中的 FormControl 与一个表单控件进行同步。

Syncs a FormControl in an existing FormGroup to a form control element by name.

参见

Exported from

选择器

属性

属性说明
control: FormControl只读

跟踪绑定到此指令的 FormControl 实例。

Tracks the FormControl instance bound to the directive.

@Input('formControlName')
name: string | number | null

跟踪绑定到此指令的 FormControl 名称。该名称对应于父 FormGroup 或 FormArray 中的键。接受字符串形式的名称或数字。字符串形式的名称对于独立表单很有用，而数字形式则允许在 FormArray 控件上进行迭代时将表单控件绑定到索引。

Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray. Accepts a name as a string or a number. The name in the form of a string is useful for individual forms, while the numerical form allows for form controls to be bound to indices when iterating over controls in a FormArray.

@Input('disabled')
isDisabled: boolean		只写

在开发人员模式下触发警告，该输入不应与响应式表单一起使用。

Triggers a warning in dev mode that this input should not be used with reactive forms.

@Input('ngModel')
model: any
@Output('ngModelChange')
update: EventEmitter
path: string[]只读

返回一个数组，该数组表示从顶级表单到此控件的路径。每个索引是该级别上控件的字符串名称。

Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level.

formDirective: any只读

该组的顶级指令（如果存在），否则为 null。

The top-level directive for this group if present, otherwise null.

继承自 NgControl

继承自 AbstractControlDirective

说明

把 FormControl 注册进一个组

Register FormControl within a group

下面的例子演示了如何把多个表单控件注册进一个表单组，并设置它们的值。

The following example shows how to register multiple form controls within a form group and set their value.

      
      import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  setValue() {
    this.form.setValue({first: 'Carson', last: 'Drew'});
  }
}

要查看把 formControlName 应用于不同类型的表单控件的例子，参见：

To see formControlName examples with different form control types, see:

和 ngModel 一起使用

Use with ngModel is deprecated

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and is scheduled for removal in a future version of Angular.

For details, see Deprecated features.

方法

viewToModelUpdate()

设置视图模型的新值并发出 ngModelChange 事件。

Sets the new value for the view model and emits an ngModelChange event.

      
      viewToModelUpdate(newValue: any): void
参数
newValue any

视图模型的新值。

The new value for the view model.

返回值

void

继承自 NgControl

继承自 AbstractControlDirective