angular - 我们如何在 Angular 前端进行密码确认？

Question

我们如何在 Angular 前端进行密码确认？我在 html 中看到一些像这样的角度函数：

    <form #signUpForm="ngForm" (ngSubmit)="signUpForm.valid && onSubmit(signUpForm)">

  <input type="text" #username="ngModel" [(ngModel)]="userService.selectedUser.username" name="username" placeholder="Full Name"
  required  [ngClass]="{'invalid-textbox' :signUpForm.submitted && !username.valid }">
  <div *ngIf="signUpForm.submitted && !username.valid">
    <label class="validation-message">This field is required.</label>
  </div>

  <input type="password" #password="ngModel" [(ngModel)]="userService.selectedUser.password" name="password" placeholder="Password"
  minlength="4" required [ngClass]="{'invalid-textbox' :signUpForm.submitted && !password.valid }">
  <div *ngIf="signUpForm.submitted && password.errors">
    <label *ngIf="password.errors.required" class="validation-message">This field is required.</label>
    <label *ngIf="password.errors.minlength" class="validation-message">Enter atleast 4 characters.</label>
  </div>

  <input type="password" #confirmPassword="ngModel" [(ngModel)]="userService.selectedUser.confirmPassword" name="confirmPassword" placeholder="confirmPassword"
  required [ngClass]="{'invalid-textbox' :signUpForm.submitted && !confirmPassword.valid }">
  <div *ngIf="signUpForm.submitted && confirmPassword.errors">
    <label *ngIf="confirmPassword.errors.required" class="validation-message">This field is required.</label>
    <label *ngIf="???" class="validation-message">password not match</label>
  </div>
  <input type="submit" value="Sign Up">
  
</form>

所以我期待还有一个类似密码确认的功能来验证你的确认密码是真还是假

标签： angular

Answer 1

您可以使用内置比较功能的 rxwebvalidator

npm i @rxweb/reactive-form-validators

这是一个工作示例

https://stackblitz.com/edit/rxweb-reactive-form-validator-angular-4zdeux

或者，您可以编写自己的代码来测试密码和确认密码是否相同

   <form #signUpForm="ngForm" (ngSubmit)="signUpForm.valid && onSubmit(signUpForm)">

  <input type="text" #username="ngModel" [(ngModel)]="userService.selectedUser.username" name="username" placeholder="Full Name"
  required  [ngClass]="{'invalid-textbox' :signUpForm.submitted && !username.valid }">
  <div *ngIf="signUpForm.submitted && !username.valid">
    <label class="validation-message">This field is required.</label>
  </div>

  <input type="password" #password="ngModel" [(ngModel)]="userService.selectedUser.password" name="password" placeholder="Password"
  minlength="4" required [ngClass]="{'invalid-textbox' :signUpForm.submitted && !password.valid }">
  <div *ngIf="signUpForm.submitted && password.errors">
    <label *ngIf="password.errors.required" class="validation-message">This field is required.</label>
    <label *ngIf="password.errors.minlength" class="validation-message">Enter atleast 4 characters.</label>
  </div>
  
  <input type="password" #confirmPassword="ngModel" [(ngModel)]="userService.selectedUser.confirmPassword" name="confirmPassword" placeholder="Password"
  minlength="4" required [ngClass]="{'invalid-textbox' :signUpForm.submitted && !password.valid }">
  <div *ngIf="signUpForm.submitted">
    <label *ngIf="userService.selectedUser.password != userService.selectedUser.confirmPassword" class="validation-message">Enter atleast 4 characters.</label>
  </div>
  
  <input type="submit" value="Sign Up">
  
</form>