Angular 9 References/ Forms
References

[formControl] directive

This is the documentation for Angular 9.
You can switch to the latest version Angular 10.

Syncs a standalone FormControl instance to a form control element.

Registering a single form control

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

Interface, extends NgControl

viewModel#

viewModel: any
Internal reference to the view model value.

form#

@Input('formControl') form: FormControl
Tracks the `FormControl` instance bound to the directive.

isDisabled#

@Input('disabled') set isDisabled(isDisabled: boolean)
Triggers a warning that this input should not be used with reactive forms.

model#

@Input('ngModel') model: any

update#

@Output('ngModelChange') update

path#

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

validator#

get validator(): ValidatorFn|null
Synchronous validator function composed of all the synchronous validators registered with this directive.

asyncValidator#

get asyncValidator(): AsyncValidatorFn|null
Async validator function composed of all the async validators registered with this directive.

control#

get control(): FormControl
The `FormControl` bound to this directive.

viewToModelUpdate#

viewToModelUpdate(newValue: any): void
Sets the new value for the view model and emits an `ngModelChange` event.