Question

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

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

在我导入到 page.ts

中的 provider.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>的值更改为<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

1 个答案: