In this demo will do conditional validation, when subscribe checkbox checked then Email is required else not required.
To Do: -
1. Import ReactiveFormsModule in the app.module.ts.
2. Use to bootstrap features, register the bootstrap CDN in the index.html.
Lets Start the Project
Step 1: - Create “AngularDemo” folder in the D drive
Step 2: - Open Visual Studio Code
Step 3: - Go to File => Click on Open Folder… => Browse and select created folder “AngularDemo” in the D drive
Step 4: - Type ng new ConditionalValidator => Press Enter
Step 5: - ? Would you like to add Angular routing? (y/N) => Type N => Press Enter
Step 6: - ? Which stylesheet format would you like to use? (Use arrow keys) => Select CSS => Press Enter
Note: - Project created
Step 7: - Go to File => Click on Open Folder… => Browse and select created Project ConditionalValidator from path D:\AngularDemo\ConditionalValidator
Step 8: -Project Loaded in Visual Studio Code
Step 9: - Open Terminal => Go to Terminal => Click on New Terminal
Step 10: - Open app.module.ts file => Import ReactiveFormModule
import { ReactiveFormsModule } from '@angular/forms';
Step 11: - Open app.component.ts file => Copy Past following in app.component.ts file
import { Component, VERSION, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title = "Conditional Validator Angular " + VERSION.major;
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
Subscribe: [false],
Email: [""]
});
this.form.get("Subscribe").valueChanges.subscribe(checkvalue => {
const email = this.form.get("Email");
if (checkvalue) email.setValidators(Validators.required);
else email.clearValidators();
email.updateValueAndValidity();
});
}
get subscribe() {
return this.form.controls["Subscribe"];
}
get email() {
return this.form.controls["Email"];
}
}
Step 12: - Open app.component.html file => Copy Past following in app.component.html file
<div class="container">
<h1>Hello {{title}}!</h1>
<form [formGroup]="form">
<div class="form-group">
<input type="checkbox" formControlName="Subscribe">Subscribe
</div>
<div class="form-group">
<input formControlName="Email" class="form-control">
<div *ngIf="email.invalid && email.touched" class="validation-error">
<div *ngIf="email.errors.required">Email is required.</div>
</div>
</div>
</form>
</div>
Step 13: - Open Root styles.css file => Copy Past following in Root styles.css file
/* You can add global styles to this file, and also import other style files */
input.ng-touched.ng-invalid {
border-color:red;
}
.validation-error {
color : red;
}
Step 14: - To use bootstrap => Open index.html file and add bootstrap CDN link in html head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ConditionalValidator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>
Step 15: - Open Terminal => Type ng serve --o => Press Enter
Add Done
Output
No comments:
Post a Comment