FormControlDirective
将独立的 FormControl 实例同步到表单控件元素。
Synchronizes a standalone FormControl instance to a form control element.
参见
Exported from
选择器
[formControl]
属性
| 属性 | 说明 |
|---|---|
@Input('formControl') | 跟踪绑定到本指令的 Tracks the |
@Input('disabled') | 只写 在开发人员模式下触发警告，该输入不应与响应式表单一起使用。 Triggers a warning in dev mode that this input should not be used with reactive forms. |
@Input('ngModel') | |
@Output('ngModelChange') | |
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. |
control: FormControl | 只读 绑定到此指令的 The |
继承自 NgControl
继承自 AbstractControlDirective
-
abstract control: AbstractControl | null -
value: any -
valid: boolean | null -
invalid: boolean | null -
pending: boolean | null -
disabled: boolean | null -
enabled: boolean | null -
errors: ValidationErrors | null -
pristine: boolean | null -
dirty: boolean | null -
touched: boolean | null -
status: string | null -
untouched: boolean | null -
statusChanges: Observable<any> | null -
valueChanges: Observable<any> | null -
path: string[] | null -
validator: ValidatorFn | null -
asyncValidator: AsyncValidatorFn | null
模板变量参考手册
| 标识符 | 用途 |
|---|---|
ngForm | #myTemplateVar="ngForm" |
说明
请注意，已弃用将 ngModel 输入属性和 ngModelChange 事件与响应式表单指令一起使用的方式，并计划在 Angular 的未来版本中删除。有关详细信息，请参阅已弃用特性。
Note that support for using the ngModel input property and ngModelChange event with reactive form directives was deprecated in Angular v6 and is scheduled for removal in a future version of Angular. For details, see Deprecated features.
下面的示例演示如何注册独立控件并设置其值。
The following example shows how to register a standalone control and set its value.
import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'example-app',
template: `
<input [formControl]="control">
<p>Value: {{ control.value }}</p>
<p>Validation status: {{ control.status }}</p>
<button (click)="setValue()">Set value</button>
`,
})
export class SimpleFormControl {
control: FormControl = new FormControl('value', Validators.minLength(2));
setValue() {
this.control.setValue('new value');
}
}
方法
设置视图模型的新值并发出 Sets the new value for the view model and emits an |
