FormControlName

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


FormControlName

directive

Syncs a FormControl in an existing FormGroup to a form control element by name.

See also

NgModule

Selectors

  • [formControlName]

Properties

Property Description
control: FormControl

Read-Only Tracks the FormControl instance bound to the directive.

number | null Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray. Accepts a name as a string or a number. The name in the form of a string is useful for individual forms, while the numerical form allows for form controls to be bound to indices when iterating over controls in a FormArray.
@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.

formDirective: any

Read-Only The top-level directive for this group if present, otherwise null.

null

Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive.

asyncValidator: AsyncValidatorFn

Read-Only Async validator function composed of all the async validators registered with 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

Description

Register FormControl within a group

The following example shows how to register multiple form controls within a form group and set their value.

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  setValue() {
    this.form.setValue({first: 'Carson', last: 'Drew'});
  }
}

To see formControlName examples with different form control types, see:

  • Radio buttons: RadioControlValueAccessor
  • Selects: SelectControlValueAccessor

Use with ngModel is deprecated

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and is scheduled for removal in a future version of Angular.

For details, see Deprecated features.

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/FormControlName