FormControlDirective

Syncs a standalone FormControl instance to a form control element.

@Directive({ selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm' }) class FormControlDirective extends NgControl implements OnChanges { viewModel: any form: FormControl set isDisabled: boolean model: any update: new EventEmitter() get path: string[] get validator: ValidatorFn | null get asyncValidator: AsyncValidatorFn | null get control: FormControl ngOnChanges(changes: SimpleChanges): void viewToModelUpdate(newValue: any): void // 继承自 forms/NgControl name: string | null valueAccessor: ControlValueAccessor | null get validator: ValidatorFn | null get asyncValidator: AsyncValidatorFn | null abstract viewToModelUpdate(newValue: any): void // 继承自 forms/AbstractControlDirective abstract get control: AbstractControl | null get value: any get valid: boolean | null get invalid: boolean | null get pending: boolean | null get disabled: boolean | null get enabled: boolean | null get errors: ValidationErrors | null get pristine: boolean | null get dirty: boolean | null get touched: boolean | null get status: string | null get untouched: boolean | null get statusChanges: Observable<any> | null get valueChanges: Observable<any> | null get path: string[] | null reset(value: any = undefined): void hasError(errorCode: string, path?: string[]): boolean getError(errorCode: string, path?: string[]): any }

选择器

[formControl]

输入参数

formControl 绑定到 FormControlDirective.form
disabled 绑定到 FormControlDirective.isDisabled

输出参数

ngModelChange 绑定到 FormControlDirective.update

导出为

说明

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).

Use this directive if you'd like to create and manage a FormControl instance directly. Simply create a FormControl, save it to your component class, and pass it into the FormControlDirective.

This directive is designed to be used as a standalone control. Unlike FormControlName, it does not require that your FormControl instance be part of any parent FormGroup, and it won't be registered to any FormGroupDirective that exists above it.

Get the value: the value property is always synced and available on the FormControl instance. See a full list of available properties in AbstractControl.

Set the value: You can pass in an initial value when instantiating the FormControl, or you can set it programmatically later using setValue or patchValue.

Listen to value: If you want to listen to changes in the value of the control, you can subscribe to the valueChanges event. You can also listen to statusChanges to be notified when the validation status is re-calculated.

Example

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'); } }

Use with 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.

Now deprecated:

<input [formControl]="control" [(ngModel)]="value">this.value = 'some value';

This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual ngModel directive is being used, but in fact it's an input/output property named ngModel on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of ngModel's other features - like delaying updates withngModelOptions or exporting the directive - simply don't work, which has understandably caused some confusion.

In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template.

To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.

After (choice 1 - use reactive forms):

<input [formControl]="control">this.control.setValue('some value');

After (choice 2 - use template-driven forms):

<input [(ngModel)]="value">this.value = 'some value';

By default, when you use this pattern, you will see a deprecation warning once in dev mode. You can choose to silence this warning by providing a config for ReactiveFormsModule at import time:

imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ]

Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of "always". This may help to track down where in the code the pattern is being used as the code is being updated.

属性

属性名类型说明
viewModel
form
isDisabled
model
update
path只读
validator只读
asyncValidator只读
control只读

方法

ngOnChanges(changes: SimpleChanges): void

参数

changes

Type: SimpleChanges.

返回值

void

viewToModelUpdate(newValue: any): void

参数

newValue

Type: any.

返回值

void