Open In App

How to check whether a form or a control is touched or not in Angular 10 ?

Last Updated : 03 Jun, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

In this article, we are going to check whether a form is touched or not in Angular 10. The touched property is used to report that the control or the form is touched or not.

Syntax:

form.touched

Return Value:

  • boolean: the boolean value to check whether a form is touched or not.

NgModule: Module used by the touched property is:

  • FormsModule
 

Approach: 

  • Create the Angular app to be used.
  • In app.component.html make a form using ngForm directive.
  • In app.component.ts get the information using the touched property.
  • Serve the angular app using ng serve to see the output.

Example:

app.component.ts 
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, 
        Validators } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  form = new FormGroup({
    name: new FormControl(
    ),
    rollno: new FormControl() 
  });

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

  onSubmit(): void {
    console.log("Form is touched : ",this.form.touched);
  }
}
app.component.html 
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">
  <br>
  
  <button type='submit'>Submit</button>
  <br><br>
</form>

Output:

Reference: https://angular.io/api/forms/AbstractControlDirective#touched


T
taran910
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox