Question

我有一个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)

Answer 1

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

Answer 2

codeUnique = (c: FormControl) => {
    // Your validation will go here
 }

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

2 个答案: