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