确认密码 mat-error - Angular / Material答案

【问题标题】：Confirm password mat-error - Angular / Material确认密码 mat-error - Angular / Material
【发布时间】：2021-07-27 16:16:42
【问题描述】：

我有这个使用 Angular 和 Material 的基本密码确认表。输入应该在以下情况下显示错误：

密码为空（有效）
密码与模式不匹配（有效）
confirm_password 为空（有效）
confirm_password 与密码不匹配（不起作用）

问题是confirm_password输入没有检测到错误，所以没有显示相应的mat-error。在不使用自定义验证器的情况下，有什么方法可以让 confirm_password 输入在不等于第一个时显示错误？

这是代码，我尽可能地对其进行了简化。谢谢！

      <mat-form-field>
        <mat-label>Password</mat-label>
        
        <input
          matInput
          name="password"
          type="password"
          [(ngModel)]="password"
          required
          pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,20}$"/>

        <mat-error
          *ngIf=" myForm.controls['password'] && (myForm.controls['password'].dirty || myForm.submitted) && myForm.controls['password'].hasError('required')">

          Password is required

        </mat-error>

        <mat-error
          *ngIf="myForm.controls['password'] && (myForm.controls['password'].dirty || myForm.submitted) && myForm.controls['password'].hasError('pattern')">

          Password should have at least 6 characters : one lowercase, one uppercase and one digit.

        </mat-error>

      </mat-form-field>



      <mat-form-field>
        <mat-label>Confirm password</mat-label>
        <input
          matInput
          name="confirm_password"
          type="password"
          [(ngModel)]="confirmPassword"
          ngModel
          required
        />

        <mat-error
          *ngIf="myForm.controls['confirm_password'] && (myForm.controls['confirm_password'].dirty || myForm.submitted) && myForm.controls['confirm_password'].hasError('required')">

          Please confirm your password

        </mat-error>

        <mat-error
          *ngIf="myForm.controls['confirm_password'] && (myForm.controls['confirm_password'].dirty || myForm.submitted) && myForm.controls['confirm_password'].value !== myForm.controls['password'].value">

          Password doesn't match

        </mat-error>
      </mat-form-field>

【问题讨论】：

标签： angular angular-material material-design angular-forms

【解决方案1】：

您可以尝试将您的 [(ngmodel)] 命名为与确认密码输入中的名称属性相同吗？此外，在您的 myForm 对象中，确认密码是confirmPassword 或confirm_password。你能把你的 TS 贴在这里吗？

【讨论】：