Angular forms FormControlName Directive
In this article, we are going to see what is FormControlName in Angular 10 and how to use it.
FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name.
Syntax:
<form [FormControlName] ="name">
Exported from:
- ReactiveFormsModule
Selectors:
- [FormControlName]
Approach:
- Create the Angular app to be used
- In app.component.ts make an object that contain value for the input.
- In app.component.html use FormControlName to get values.
- Serve the angular app using ng serve to see the output.
Example 1:
app.component.ts
import { Component, Inject } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { form = new FormGroup({ name: new FormControl(), rollno: new FormControl() }); get name(): any { return this.form.get('name'); } get rollno(): any { return this.form.get('rollno'); } onSubmit(): void { console.log(this.form.value); } } |
app.component.html
<br> <form [formGroup]="form" (ngSubmit)="onSubmit()"> <input formControlName="name" placeholder="Name"> <input formControlName="rollno" placeholder="RollNo"> <br> <button type='submit'>Submit</button> <br> <br> </form> |
Output:
Reference: https://angular.io/api/forms/FormControlName