`formControlName`

Links an input to a named control inside a parent FormGroup.

Since Angular 2+ Spec ↗

Syntax

formControlName="controlName"

Parameters

Name	Type	Required	Description
`name`	`string`	No	Key of the control within the enclosing FormGroup.

Returns

directive — Binds the input to the named control.

Throws

Error — When used without a parent formGroup/formGroupName.

Examples

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

@Component({
  selector: 'app-x',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <input formControlName="username" />
    </form>
  `,
})
export class XComponent {
  form = new FormGroup({ username: new FormControl('') });
}

Notes

Must be used inside an element bound with `[formGroup]` (or nested formGroupName/formArrayName). Use it instead of `[formControl]` when the control belongs to a group. Requires ReactiveFormsModule.