How I can validate password with multiple conditions, Here is my HTML and TS file is, HTML
<div class="container"> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <label for="password">Password</label> <input formControlName="password" id="password" type="password" class="form-control"> <div *ngIf="f.password.touched && f.password.invalid" class="alert alert-danger"> <div *ngIf="f.password.errors.required">Password is required.</div> </div> </div> <div class="form-group"> <label for="confirm_password">Confirm Password</label> <input formControlName="confirm_password" id="confirm_password" type="password" class="form-control"> <div *ngIf="f.confirm_password.touched && f.confirm_password.invalid" class="alert alert-danger"> <div *ngIf="f.confirm_password.errors.required">Password is required.</div> <div *ngIf="f.confirm_password.errors.confirmedValidator">Password and Confirm Password must be match.</div> </div> </div> <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button> </form> </div>
TS File
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form: FormGroup = new FormGroup({}); constructor(private fb: FormBuilder) { this.form = fb.group({ password: ['', [Validators.required]], confirm_password: ['', [Validators.required]] }) } get f(){ return this.form.controls; } submit(){ console.log(this.form.value); } }