Html 是否有更简单的方法检查表单中的密码和重复密码是否匹配？

在我的表单中，我有两个文本字段，用户应该在其中写入新密码并重复该密码

我用*ngIf做了很多不同的尝试，现在我对它的工作原理感到非常困惑。我尝试调用一个比较字符串并返回true或false的函数，但这也不起作用

<mat-card>
  <form (submit)="onSubmit(form)" #form="ngForm">
    <table>
      <tr>
        <td>
          New password:
        </td>
        <td>
          <mat-form-field>
            <input
              matInput
              type="password"
              name="newPsw"
              ngModel
              required
              #newPsw="ngModel"/>
            <mat-error *ngIf="newPsw.invalid"
              >Required field!</mat-error>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td>
          Repeat new password:
        </td>
        <td>
          <mat-form-field>
            <input
              matInput
              type="password"
              name="newPswRepeated"
              ngModel
              required
              #newPswRepeated="ngModel"
            />
            <mat-error *ngIf="newPswRepeated.value!==newPsw.value">Passwords don't match!</mat-error>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button mat-raised-button color="primary" type="submit">
            Sign Up
          </button>
        </td>
      </tr>
    </table>
  </form>
</mat-card>

新密码：
必填字段！
重复新密码：
密码不匹配！
注册

您可以在FormGroup上使用验证器进行此类比较：

import { FormGroup } from '@angular/forms';

export const equivalentValidator = (firstControlName: string, secondControlName: string) => {

  return (formGroup: FormGroup) => {
    const firstControl = formGroup.get(firstControlName);
    const secondControl = formGroup.get(secondControlName);

    if (firstControl.value !== secondControl.value) {
      return secondControl.setErrors({ notEqual: true });
    }
  }

}

在组件中，创建一个FormGroup，将验证程序分配给组本身：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  ...
})
export class YourComponent implements OnInit {

  form: FormGroup;

  constructor (
    private formBuilder: FormBuilder,
  ) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      newPsw: [
        '', [ Validators.required, ]
      ],
      newPswRepeated: [
        '', [ Validators.required, ]
      ]
    }, {
      validator: equivalentValidator('newPsw', 'newPswRepeated'),
    });

  }

}

现在，

newPswRepeated

字段将出现一个错误

notEqual

，如果字段的值不相同，您可以对此作出反应

<mat-error *ngIf="newPswRepeated.errors.notEqual">Passwords don't match!</mat-error>

密码不匹配！

---

您需要将表单修改为反应式表单，以获得正确的值绑定。有关更多信息，请参阅。我想您会发现，与模板驱动的语法相比，反应式表单将为您提供更严格的控制。

您可以制作如下自定义验证器来验证密码确认

this.registerForm = this._formBuilder.group({
   email          : ['', [Validators.required, Validators.email]],
   password       : ['', Validators.required],
   passwordConfirm: ['', [Validators.required, confirmPasswordValidator]]
});

验证器 通过使用角度形式的自定义验证器，您可以执行任何类型的验证。谢谢。

用于自定义验证

this.setPasswordForm=新表单组（{
密码：new FormControl（“”，Validators.required）；， copassword:newformcontrol（“”，[Validators.required，CustomValidators.equalTo（password）]；， });

---

非常感谢。不过，出于好奇，你能解释一下为什么我的方法不起作用吗？如果没有看到更多的组件代码，很难说，但我猜这两个字段之间的数据绑定是不同步的。

export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {

    if ( !control.parent || !control )
    {
        return null;
    }

    const password = control.parent.get('password');
    const passwordConfirm = control.parent.get('passwordConfirm');

    if ( !password || !passwordConfirm )
    {
        return null;
    }

    if ( passwordConfirm.value === '' )
    {
        return null;
    }

    if ( password.value === passwordConfirm.value )
    {
        return null;
    }

    return {passwordsNotMatching: true};
};