FormControlDirective

From Get docs
< @angular/formsAngular/docs/10/api/forms/formcontroldirective


FormControlDirective

directive

Synchronizes a standalone FormControl instance to a form control element.

See more...

See also

NgModule

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 FormControl bound to this directive.

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

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

viewToModelUpdate(newValue: any): void

Parameters
newValue any The new value for the view model.
Returns

void


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