在验证与angular2领域的比较 [英] Comparing fields in validator with angular2

问题描述

我试图创造Angular2登记表，有一个重复密码的功能。我想这一点使用自定义验证的一种形式控制工作。

我遇到的问题是，这个语境似乎在验证运行，所以我不能访问的RegistrationForm类中的任何本地方法设置为验证器。而我似乎无法找到从验证访问ControlGroup什么好办法。

任何人都知道一个很好的方法来访问其他控件相同的控制组中自定义验证程序里面呢？

该是组件的简短示例：

 进口{组件，查看}从'angular2 / angular2';
进口{验证器，ControlGroup，控制FORM_DIRECTIVES，FORM_BINDINGS}从'angular2 / angular2';@零件（{
    选择：表格登记
}）
@视图（{
    指令：[FORM_DIRECTIVES，ROUTER_DIRECTIVES]
    模板：`
        ＆LT;形式（提交）=寄存器（$事件）[NG-形式模型] =registerForm＆GT;
            ＆LT;标签=密码1＆GT;密码：LT; /标签＆gt;
            ＆LT;输入ID =密码1NG控制=密码1TYPE =密码占位符=Passord/＆GT;            ＆LT;标签=密码2＆GT;重复密码：LT; /标签＆gt;
            ＆LT;输入ID =密码2NG控制=密码2类型=密码占位符=Gjenta passord/＆GT;            ＆LT;按钮类=纳普提交类型=提交[禁用] =registerForm.valid！＆GT; Registrer度＆LT; /按钮＆GT;
        ＆LT; /表及GT;
    `
}）
出口类RegistrationForm {
    registerForm：ControlGroup;    构造函数（）{
        this.registerForm =新ControlGroup（{
            密码1：新的控制（''，Validators.required）
            密码2：新的控制（''，this.customValidator）
        }）;
    }    公共寄存器（事件：事件）{
        // 提交表格
    }    私人的CustomValidator（控制：控制）{
        //检查控制等于密码1控制
        返回的isEqual {：control.value === this.registerForm.controls ['密码1']值};
    }
}
 

解决方案

所以我用的CustomValidator结合我班的这个上下文中被塞尔吉奥注释解释解决了这个问题。

记

请了.bind（本）函数返回绑定上下文功能的新实例。

 进口{组件，查看}从'angular2 / angular2';
进口{验证器，ControlGroup，控制FORM_DIRECTIVES，FORM_BINDINGS}从'angular2 / angular2';@零件（{
    选择：表格登记
}）
@视图（{
    指令：[FORM_DIRECTIVES，ROUTER_DIRECTIVES]
    模板：`...我的表单模板...`
}）
出口类RegistrationForm {
    registerForm：ControlGroup;    构造函数（）{
        this.customValidator = this.customValidator.bind（本）;
        this.registerForm =新ControlGroup（{
            密码1：新的控制（''，Validators.required）
            密码2：新的控制（''，this.customValidator）
        }）;
    }    公共寄存器（事件：事件）{
        // 提交表格
    }    私人的CustomValidator（控制：控制）{
        //检查控制等于密码1控制
        返回的isEqual {：control.value === this.registerForm.controls ['密码1']值};
    }
}
 

I am trying to create a registration form in Angular2, having a "repeat password" functionality. I want this to work using a custom validator as a form-control.

The problem I am having is that the "this-context" seems to be set to the validator when the validator is running so I cant access any local methods on the RegistrationForm class. And I can't seem to find any good way to access the ControlGroup from the validator.

Anyone know a good way to access other controls in the same control-group inside a custom validator?

The is a short sample of the component:

import { Component, View } from 'angular2/angular2';
import { Validators, ControlGroup, Control, FORM_DIRECTIVES, FORM_BINDINGS } from 'angular2/angular2';

@Component({
    selector: 'form-registration'
})
@View({
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES],
    template: `
        <form (submit)="register($event)" [ng-form-model]="registerForm">
            <label for="password1">Password:</label>
            <input id="password1" ng-control="password1" type="password" placeholder="Passord" />

            <label for="password2">Repeat password:</label>
            <input id="password2" ng-control="password2" type="password" placeholder="Gjenta passord" />

            <button class="knapp-submit" type="submit" [disabled]="!registerForm.valid">Registrer deg</button>
        </form>
    `
})
export class RegistrationForm {
    registerForm: ControlGroup;

    constructor() {            
        this.registerForm = new ControlGroup({
            password1: new Control('', Validators.required),
            password2: new Control('', this.customValidator)
        });
    }

    public register(event: Event) {
        // submit form
    }

    private customValidator(control: Control) {
        // check if control is equal to the password1 control
        return {isEqual: control.value === this.registerForm.controls['password1'].value};
    }
}

解决方案

So I solved the problem by binding the customValidator to the this-context of my class as explained in the comment by Sergio.

Keep in mind that the .bind(this) function returns a new instance of the function with the bound-context.

import { Component, View } from 'angular2/angular2';
import { Validators, ControlGroup, Control, FORM_DIRECTIVES, FORM_BINDINGS } from 'angular2/angular2';

@Component({
    selector: 'form-registration'
})
@View({
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES],
    template: `...my form template...`
})
export class RegistrationForm {
    registerForm: ControlGroup;

    constructor() {           
        this.customValidator = this.customValidator.bind(this); 
        this.registerForm = new ControlGroup({
            password1: new Control('', Validators.required),
            password2: new Control('', this.customValidator)
        });
    }

    public register(event: Event) {
        // submit form
    }

    private customValidator(control: Control) {
        // check if control is equal to the password1 control
        return {isEqual: control.value === this.registerForm.controls['password1'].value};
    }
}

这篇关于在验证与angular2领域的比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！