FormControlDirective
directive
Synchronizes a standalone FormControl
instance to a form control element.
See also
- Reactive Forms Guide
FormControl
AbstractControl
NgModule
-
ReactiveFormsModule
Selectors
[formControl]
Properties
Property | Description |
---|---|
@Input('formControl')form: FormControl
|
Tracks the FormControl instance bound to the directive.
|
@Input('disabled')isDisabled: boolean
|
Write-Only 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[]
|
Read-Only 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. |
null |
Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive. |
null |
Read-Only Async validator function composed of all the async validators registered with this directive. |
control: FormControl
|
Read-Only
The |
Inherited from NgControl
name: string | number | null
valueAccessor: ControlValueAccessor | null
validator: ValidatorFn | null
asyncValidator: AsyncValidatorFn | null
Inherited from 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
Template variable references
Identifier | Usage |
---|---|
ngForm
|
#myTemplateVar="ngForm"
|
Description
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');
}
}
Methods
viewToModelUpdate() | |||
---|---|---|---|
Sets the new value for the view model and emits an ngModelChange event.
| |||
viewToModelUpdate(newValue: any): voidParameters
Returns
|
Inherited from NgControl
abstract viewToModelUpdate(newValue: any): void
Inherited from AbstractControlDirective
reset(value: any = undefined): void
hasError(errorCode: string, path?: string | (string | number)[]): boolean
getError(errorCode: string, path?: string | (string | number)[]): any
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/forms/FormControlDirective