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

中找到工作示例

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

Ionic 3 password and confirm password validation using formBuilder

validation

formbuilder

ionic-framework

ionic3

angular