Angular2中唯一性的自定义验证器

我有一个Angular2表单字段.我想要求输入的值不存在.我的组件通过@Input参数接收现有值的数组.我的组件中有一个自定义验证器函数codeUnique(),但是当它被执行时,它无法访问实例成员. “this”返回FormControl或undefined.我的验证器函数已被吸入外部空间,剥离了它的上下文和实例变量.如何将现有值列表添加到验证器中？我可以把它们放在全球范围内,恐怖吗？

import { Component,Input,Output,EventEmitter } from '@angular/core';
import { NG_VALIDATORS,FormControl,FormBuilder,FormGroup,Validators,AbstractControl } from '@angular/forms';

import { ReferringAppModel } from './referringapp.model';
//import { CodeValidator } from './code-validator';

@Component({
    selector: 'add-client-form',templateUrl: 'src/home/add-client-form.component.html'
})
export class AddClientFormComponent {
    myForm: FormGroup;
    code: AbstractControl;
    name: AbstractControl;

    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            'code': ['',this.codeUnique],'name': ['',Validators.required]
        });
        this.code = this.myForm.controls['code'];
        this.name = this.myForm.controls['name'];
    }
    @Input() referringApps: ReferringAppModel[];

    ngOnInit() {
    }
    onSubmit(form: any): void {
        console.log("submitted")
    };

    codeUnique(c: FormControl) {
        try {
            // Blows up. 
            return !this.referringApps.find(appInApps => appInApps.Code == c.value) ? null : {
                //return false ? null : { // WORKS
                validateEmail: {
                    valid: false
                }
            };
        } catch (ex) {
            console.log(ex);
        }
    }
}


TypeError: Cannot read property 'referringApps' of undefined
    at AddClientFormComponent.codeUnique (http://localhost/HubHacienda/dist/bundle.js:50071:26)
    at http://localhost/HubHacienda/dist/bundle.js:43538:54
    at Array.map (native)
    at _executeValidators (http://localhost/HubHacienda/dist/bundle.js:43538:28)
    at FormControl.Validators.compose [as validator] (http://localhost/HubHacienda/dist/bundle.js:43518:38)
    at FormControl.AbstractControl._runValidator (http://localhost/HubHacienda/dist/bundle.js:45083:54)
    at FormControl.AbstractControl.updateValueAndValidity (http://localhost/HubHacienda/dist/bundle.js:45061:38)
    at FormControl.setValue (http://localhost/HubHacienda/dist/bundle.js:45327:19)
    at DefaultValueAccessor.onChange (http://localhost/HubHacienda/dist/bundle.js:44287:22)
    at DebugAppView._View_AddClientFormComponent0._handle_input_12_0 (AddClientFormComponent.ngfactory.js:493:47)
    at DebugAppView.eventHandler (http://localhost/HubHacienda/dist/bundle.js:35576:29)
    at COMPONENT_REGEX (http://localhost/HubHacienda/dist/bundle.js:38521:41)
    at http://localhost/HubHacienda/dist/bundle.js:38634:116
    at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6875:29)
    at Object.onInvoke (http://localhost/HubHacienda/dist/bundle.js:32132:42)
    at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6874:35)
    at Zone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:6782:48)
    at NgZoneImpl.runInnerGuarded (http://localhost/HubHacienda/dist/bundle.js:32161:83)
    at NgZone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:32393:78)
    at HTMLInputElement.outsideHandler (http://localhost/HubHacienda/dist/bundle.js:38634:84)
    at ZoneDelegate.invokeTask (http://localhost/HubHacienda/dist/bundle.js:6908:38)
    at Zone.runTask (http://localhost/HubHacienda/dist/bundle.js:6808:48)
    at HTMLInputElement.ZoneTask.ZoneTask.cancelFn.invoke (http://localhost/HubHacienda/dist/bundle.js:6976:34)

简单：在分配验证器时,将类的this参数绑定到它,如下所示：’code：[”,this.codeUnique.bind(this)]

原文链接：https://www.f2er.com/angularjs/140310.html

Angular2中唯一性的自定义验证器

猜你在找的Angularjs相关文章