Docs4dev
Docs
angular / 12 / api / forms / formcontrolname.html

FormControlName

directive

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

See also

Exported from

Selectors

Properties

Property Description
override

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.
control: FormControl Read-Only
name: string | number | null
@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

Deprecated as of v6
@Output('ngModelChange')update: EventEmitter

Deprecated as of v6
path: string[] Read-Only
formDirective: any Read-Only

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

Inherited from NgControl

Inherited from AbstractControlDirective

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:

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

viewToModelUpdate()

viewToModelUpdate(newValue: any): void

Parameters
newValue any
Returns

void

Inherited from NgControl

Inherited from AbstractControlDirective

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/forms/FormControlName