我有一个反应角形式。我的表单中有两个字段“密码”和“确认密码”。因此,通常当人们在确认密码部分输入不匹配的密码时,它应该显示“
password did not match
”消息。当字段未填写时,应该显示“mandatory field
”消息。
问题:当我输入不匹配的密码时,我放在 HTML 上的警告消息未显示。
app.component.ts
import { Component, ViewChild, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { userInfo } from './Models/UserInfo';
import { CSCService } from './Services/csc.service';
import { NgForm, AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AllinOne';
editRecordId = null;
formData:any[] = [];
@ViewChild('f') Forms!: NgForm;
genders = ['male', 'female'];
public user:any=[];
// user = {
// id: "",
// username: "",
// email: "",
// phoneNumber: "",
// states: [],
// cities: [],
// gender: "",
// }
form = ['one', 'two', 'three'];
selected = 'two'
submitted = false;
public check:boolean=true;
// Password confirmation function
checkPass(pas1:any,pas2:any){
console.log(pas1.value);
console.log(pas2.value);
if (pas1.value == pas2.value)
{
this.check=false;
console.log("Matched");
}
else
{
this.check=true;
console.warn("Not matched");
}
}
constructor(private formBuilder: FormBuilder, private cscService: CSCService) {
this.user=new userInfo('','','','','','','','','','');
}
ngOnInit() {
this.country=this.cscService.country();
console.log(this.country);
this.state=this.cscService.state();
console.log(this.state);
this.city=this.cscService.city();
console.log(this.city);
}
country:any=[];
state:any=[];
city:any=[];
onSelectCountry(country:any){
console.log(country.target.value);
this.state=this.cscService.state().filter(e=>e.did==country.target.value);
console.log(this.state);
}
onSelectState(state:any){
console.log(state.target.value);
this.city=this.cscService.city().filter(f=>f.sid==state.target.value);
console.log(this.city);
}
onEdit(user:any) {
// destructure user object separate ID and rest of the fields
// coz we didn't have ID field so to avoid error dont use ID
const {id, ...data} = user
// set edit record ID
this.editRecordId = id;
// set form value with selected user
this.Forms.setValue(data)
}
onDelete(user:any) {
// filter out deleted entry from form data array matching
// with the ID of deleted user record with ID from form data array
this.formData = this.formData.filter((data:any) => data.id !== user.id)
}
onSubmit(): void{
this.submitted = true;
if (this.editRecordId) {
// check if already exist record in formData matches with the
// edit reocrd id that means its edited record then return newly
// submitted form value else return old formData record
// and populate formData array.
this.formData = this.formData.map((data:any) => data.id === this.editRecordId ? this.Forms.value : data)
// rest edit record id to null again
this.editRecordId = null;
} else {
// assigning unique ID to each record I used timestamp technically it would be database primary key ID
const id = Date.now();
const data = {
id,
...this.Forms.value
}
this.formData.push(data)
}
this.Forms.reset();
}
}
app.component.html
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" placeholder="Password" #pas1="ngModel" [class.is-invalid]="pas1.invalid && (pas1.dirty||pas1.touched)" pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,30})" required class="form-control" [(ngModel)]="user.pas1" class="form-control" name="pas1" required>
<section *ngIf="pas1.invalid && (pas1.dirty||pas1.touched)">
<small class="text-danger" *ngIf="pas1.hasError('required')">
Password is <strong>required</strong>
</small>
<small class="text-danger" *ngIf="pas1.hasError('pattern')">
Password must be atleast <strong>12 characters long, must have a special character, a capital letter and a small letter</strong>
</small>
</section>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="text" class="form-control" placeholder="Confirm Password" #pas2="ngModel" [class.is-invalid]="pas2.invalid && checkPass(pas1,pas2)" [(ngModel)]="user.pas2" name="pas2" (keyup)="checkPass(pas1,pas2)" required>
<section *ngIf="pas2.invalid && (pas2.dirty||pas2.touched)">
<small class="text-danger" *ngIf="pas2.hasError('required')">
<strong>Mandatory field</strong>
</small>
<small class="text-danger" *ngIf="pas2.hasError('pattern')">
<strong>Password did not match</strong>
</small>
</section>
</div>
对于
pas2
控件,当表单控件无效时显示错误:
*ngIf="pas2.invalid && (pas2.dirty||pas2.touched)"
当您进行自定义验证时,您需要将错误设置为
pas2
控制验证失败时的情况。
this.Forms.controls['pas2'].setErrors({ pattern: true });
如果验证通过,请不要忘记删除错误。
完整代码:
checkPass(pas1: any, pas2: any) {
console.log(pas1.value);
console.log(pas2.value);
if (pas1.value == pas2.value) {
this.check = false;
console.log('Matched');
this.Forms.controls['pas2'].setErrors(null);
this.Forms.controls['pas2'].updateValueAndValidity();
} else {
this.check = true;
console.warn('Not matched');
this.Forms.controls['pas2'].setErrors({ pattern: true });
}
}