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 invalid or not in Angular 10 ?

Last Updated : 24 May, 2021

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 the invalid 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 invalid 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 invalid : ",this.form.invalid);
}
}

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#invalid

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 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 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 untouched or not in Angular 10 ?

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 us

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

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 submit form on pressing Enter with Angular 9?

To submit a form in angular we have the following options: Create a button to submit the form.Assign a key to submit the formOr we can do both. In this tutorial, we will see how to use a specific key(Enter in this case) to submit a form. Approach: We can use angular keydown event to use Enter key as

How to disable a form control in Angular ?

In this article, we are going to see how to disable a form control in Angular 10. We will use AbstractControl disabled property to disable a form control element. Syntax: <formelement disabled></formelement> Return Value: boolean: returns boolean stating whether the element is disabled o

How to add Buttons without Submit the Form in Angular?

In Angular, when adding buttons to a form, their default behavior on click is to submit the form itself. However, there are certain situations in which it is necessary to create buttons for forms that provide some sort of functionality or trigger custom logic without triggering the default form subm

How to clear form after submission in Angular 2?

In Angular 2, they are two types of forms: Template-driven forms. Reactive forms. In template-driven forms, most of the content will be populated in .html file.In Reactive forms, most of the functionalities and content will be performed in .ts file. The main advantage of reactive forms is, we can cr

How to detect when an @Input() value changes in Angular?

@Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper