如何在我的角度代码中显示确认密码消息的警告？

Question

我有一个反应角形式。我的表单中有两个字段“密码”和“确认密码”。因此，通常当人们在确认密码部分输入不匹配的密码时，它应该显示“

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>
 

Answer 1

对于

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 });
  }
}

演示@StackBlitz