Ionic 3 密码和使用 formBuilder 确认密码验证

Question

我有一个更改密码，它有一个formBuilde，它将验证表单中的每个字段。我想实时验证confirmPassword 和newPassword。

这是我到目前为止所做的：

在我的 provider.ts 中，我已在 page.ts

中导入

import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Injectable()
export class ValidationServiceProvider {

    constructor() {
        console.log('Hello ErrorHandlerProvider Provider')
    }

    // Validation for password and confirm password
    static MatchPassword(AC: AbstractControl) {
       const newPassword = AC.get('newPassword').value // to get value in input tag
       const confirmPassword = AC.get('confirmPassword').value // to get value in input tag
        if(newPassword != confirmPassword) {
            console.log('false');
            AC.get('confirmPassword').setErrors( { MatchPassword: true } )
        } else {
            console.log('true')
            AC.get('confirmPassword').setErrors(null);
        }
    }
}

我有一个静态的method，将在我的page.ts

中调用

现在在我的 ts 文件中。

导入提供者

import { ValidationServiceProvider } from '../../providers/validation-service';

现在是formBuilder

this.changePasswordForm = this.formBuilder.group({
      oldPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
      newPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
      confirmPassword: [
        "",
        Validators.compose([
          Validators.minLength(4),
          Validators.required
        ])
      ],
    }, {
      validator: ValidationServiceProvider.MatchPassword // Inject the provider method
    });

现在在我的 html 文件中

<form [formGroup]="changePasswordForm" (submit)="submit()">
      <ion-item>
        <ion-label stacked>
          Your Old Password
        </ion-label>
        <ion-input formControlName="oldPassword" type="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>
          Your New Password
        </ion-label>
        <ion-input formControlName="newPassword" type="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>
          Confirm Password
        </ion-label>
        <ion-input formControlName="confirmPassword" id="confirmPassword" type="password"></ion-input>
        <p *ngIf="changePasswordForm.controls['confirmPassword'].errors?.MatchPassword" style="color: red">New password and Confirm password did not match</p>
      </ion-item>
        <button *ngIf="!changingPassword" type="submit" [disabled]="!changePasswordForm.valid" color="primary" ion-button block>Submit</button>

        <button *ngIf="changingPassword" color="primary" disabled ion-button block>
          <div class="center-vertical-horizontal">
            Processing...
            <ion-spinner class="button-spinner" name="crescent"></ion-spinner>
          </div>
        </button>
    </form>

一切正常，但如果 newPassword 和 confirmPassword 不匹配，我想向用户显示短信。

以下代码但无法正常工作。

<p *ngIf="changePasswordForm.controls['confirmPassword'].errors?.MatchPassword" style="color: red">New password and Confirm password did not match</p>

完全没有错误。 p 标签不会显示我想要的。

我刚刚关注了这个tutorial，但运气不够好。

有人可以帮我解释一下吗？

提前致谢。 感谢有人可以提供帮助。

Answer 1

代码似乎没有任何问题。但我已将 <p> ta 更改为 <ion-label> 现在它工作正常。

  <ion-label *ngIf="changePasswordForm.get('confirmPassword').errors?.MatchPassword" style="color: red">
                New password and Confirm password did not match
  </ion-label>

在this stackblitz 中找到工作示例