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

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

Last Updated : 24 May, 2021

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

Syntax:

form.untouched

Return Value:

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

NgModule: Module used by the untouched 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 untouched property.
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } 
    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');
}

onSubmit(): void {
  console.log("Form is untouched : ",this.form.untouched);
}
}

app.component.html

<br>
<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#untouched

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

taran910

Improve

Article Tags :

Similar Reads

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

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

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

In this article, we are going to check whether a form is touched or not in Angular 10. The valid property is used to report that the control or the form is valid or not. Syntax: form.valid Return Value: boolean: the boolean value to check whether a form is valid or not. NgModule: Module used by the

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

In this article, we are going to check whether a form is invalid or not in Angular 10. invalid property is used to report that the control or the form is invalid or not. Syntax: form.invalid Return Value: boolean: the boolean value to check whether a form is invalid or not. NgModule: Module used by

How to Add Validator to FormControl After Control is Created in Angular ?

Adding a validator to a form typically refers to the process of defining rules or conditions that suggest whether the data entered into the form fields is valid or not. Initially, the form can be submitted without any validation. However, after adding a validation rule, submission is only allowed if

How to validate checkbox form in angular 15

In Angular applications, it is often necessary to validate form inputs to ensure that users provide the required information correctly. Checkbox inputs are commonly used to allow users to select one or more options from a list. This article will cover different approaches to validating checkbox inpu