Question

我正在开发一个用户注册页面，在那里我可以验证表单以确保在将表单发送到数据库之前填充它们。现在我想要实现的是确保用户的密码在按钮被激活之前匹配。

JS：

  constructor(public navCtrl: NavController,
              public http: Http,
              public loadingCtrl: LoadingController,
              public alertCtrl: AlertController,
              public toastCtrl: ToastController,
              public formBuilder: FormBuilder) {

                this.createUsernameForm = this.formBuilder.group({
                  username: ['', Validators.required],
                  password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
                  retypePassword:['',Validators.required]
                });

HTML：

 <form [formGroup]="createUsernameForm">
  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text" formControlName="username"  [(ngModel)]="username" (ngModelChange)="username = $event.toLocaleLowerCase()"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password" formControlName="password"  [(ngModel)]="password"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label floating>Retype Password</ion-label>
      <ion-input type="password" formControlName="retypePassword"  [(ngModel)]="retypePassword"></ion-input>
    </ion-item>
    <div>Passwords do not match!</div>

  <p>
    <button icon-left ion-button large full (click)="createUsername()" [disabled]="!createUsernameForm.valid">
      <ion-icon name="arrow-dropright"></ion-icon>
      Sign In
    </button>
  </p>

    </form>

Answer 1

您需要创建自定义验证程序，以比较两个控件，并在formGroup中应用此验证程序。

示例：

static EqualValidator(c1: AbstractControl, c2: AbstractControl): ValidatorFn {
        return () => {
            return c1 && c2 && c1.value === c2.value ? null : {notMatch: true};
        };
    }

Answer 2

在重新输入密码的(input)=validatePassword()上使用<ion-input>，然后在validatePassword()内执行验证逻辑，并将标志设置为true以启用按钮

在使用Angular 2

2 个答案: