角2的形式确认了重复密码 [英] Angular 2 form validating for repeat password

问题描述

请参阅本<一个href=\"http://stackoverflow.com/questions/33768655/comparing-fields-in-validator-with-angular2\">question关于在在比较与验证angular2 字段。不幸的是角2改了一下，这样的解决方案似乎不工作了。这里是我的code：

Please refer to this question regarding the Comparing fields in validator with angular2. Unfortunately Angular 2 changed a bit so that solution seems not working anymore. Here is my code:

import {IonicApp,Page,NavController,NavParams} from 'ionic/ionic'
import {Component} from 'angular2/core'
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common'
import {ControlMessages} from '../../components/control-messages'
import {ValidationService} from '../../services/validation-service'

@Page({
  templateUrl: 'build/pages/account/register.html',
  directives: [ControlMessages]
})
export class RegisterPage {

  constructor(nav:NavController,private builder: FormBuilder) {
    this.nav = nav
    this.registerForm = this.builder.group({
      'name' : ['', Validators.required],
      'email' : ['',Validators.compose([Validators.required, ValidationService.emailValidator])],
      'password' : ['',Validators.required],
      'repeat' : ['',this.customValidator]
      }
    )        
  }

  register() {    
    alert(this.registerForm.value.password)
  }

  private customValidator(control) {         
    //console.log(this.registerForm.value.password)
    //return {isEqual: control.value === this.registerForm.value.password}
    return true  
  }
}

我的HTML：

<ion-content class="account">
  <ion-list padding>
    <form [ngFormModel]='registerForm' (submit)='register()'>
      <div class="centered">
        <img class="logo" src="img/logo.png" alt="">
      </div>
      <div class="spacer" style="height: 20px;"></div>

      <ion-input>
        <ion-label floating>Name</ion-label>
        <input type="text" ngControl='name' id='name'>
        <control-messages control="name"></control-messages>            
      </ion-input>

      <ion-input>
        <ion-label floating>Email</ion-label>
        <input type="email" ngControl='email' id='email'>
        <control-messages control="email"></control-messages>               
      </ion-input>

      <ion-input>
        <ion-label floating>Password</ion-label>
        <input type="password" ngControl='password' id='password' value="">
        <control-messages control="password"></control-messages>        
      </ion-input>

      <ion-input>
        <ion-label floating>Confirm Password</ion-label>
        <input type="password" ngControl='repeat' id='repeat'>
        <control-messages control="repeat"></control-messages>                
      </ion-input>

      <button class="calm" full type='submit' [disabled]='!registerForm.valid'>Register</button>

      <ion-item style="background-color:transparent;border:none;">
        <button class="text-button" clear item-right (click)="gotoLogin()">Have an account already, Login</button>
      </ion-item>
    </form>
  </ion-list>

</ion-content>

但不幸的是，我不能访问我的验证功能密码值。如果我取消的console.log（this.registerForm.value.password），然后我得到了以下错误消息：

But unfortunately, I can't access the 'password' value in my validating function. If I uncomment console.log(this.registerForm.value.password), then I got the following error message:

例外：类型错误：无法读取的未定义的属性价值

EXCEPTION: TypeError: Cannot read property 'value' of undefined

你知道吗？谢谢你。

推荐答案

我看到你的code几个问题。您尝试使用这个关键字的验证功能，这不符合该组件的实例。这是因为你设置它作为一个验证器函数时引用的功能。

I see several problems in your code. You try to use the this keyword in the validator function and this doesn't correspond to the instance of the component. It's because you reference the function when setting it as a validator function.

此外与控制关联的值可以在值达到属性。

Moreover the value associated with a control can be reached in the value property.

这是说，我觉得你的两个领域共同验证正确的方法是创建一个组和一个验证器在其关联：

That said, I think that the right way to validate your two fields together is to create a group and associate a validator in it:

this.registerForm = this.builder.group({
  'name' : ['', Validators.required],
  'email' : ['',Validators.compose([Validators.required,
                         ValidationService.emailValidator])],
  'passwords': fb.group({
    password: ['', Validators.required],
    repeat: ['', Validators.required]
  }, {validator: this.areEqual})
});    

这样，您将有机会获得该组的所有控制，而不是唯一的一个，不再需要使用这个关键字...这可以被访问使用控制群控的财产。后者（没有一个）验证被触发时被直接提供。例如：

This way you will have access to all controls of the group and not only one and don't need anymore to use the this keyword... This can be accessed using the controls property of the group control. The latter (not a single one) is directly provided when validation is triggered. For example:

areEqual(group: ControlGroup) {
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value

    (...)
  }

  if (valid) {
    return null;
  }

  return {
    areEqual: true
  };
}

有关详细信息，请参阅本前面回答：

See this anwer for more details:

• Cross在Angular2
字段验证

• Cross field validation in Angular2

修改

要显示错误，你可以简单地使用下列内容：

To display the error, you can simply use the following:

<span *ngIf="!registerForm.passwords.valid" class="help-block text-danger">
  <div *ngIf="registerForm.passwords?.errors?.areEqual">
    The two passwords aren't the same
  </div>
</span>

这篇关于角2的形式确认了重复密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！