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);
}
}
pre
& code
tags ):