Question

这是我在这里的第一个问题，希望其他地方没有答案。所以... 我在Firefox中有错误

TypeError: this is undefined
    unique async-clientID.validator.ts:14
    Angular 20
        _executeAsyncValidators
        _executeAsyncValidators
        composeAsync
        _runAsyncValidator
        updateValueAndValidity
        setValue
        updateControl
        setUpViewChangePipeline
        _handleInput
        DefaultValueAccessor_input_HostBindingHandler
        executeListenerWithErrorHandling
        wrapListenerIn_markDirtyAndPreventDefault
        decoratePreventDefault
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        invokeTask
        invokeTask
        globalZoneAwareCallback

和在Chrome中：

TypeError: Cannot read property 'service' of undefined
    at unique (async-clientID.validator.ts:14)
    at forms.js:1163
    at Array.map (<anonymous>)
    at _executeAsyncValidators (forms.js:1163)
    at FormControl.asyncValidator (forms.js:1144)
    at FormControl._runAsyncValidator (forms.js:3030)
    at FormControl.updateValueAndValidity (forms.js:3005)
    at FormControl.setValue (forms.js:3386)
    at updateControl (forms.js:2407)
    at DefaultValueAccessor.onChange (forms.js:2392)

我的async-clientID.validator.ts看起来像这样，错误符合return this.service...

@async-clientID.validator.ts
import { Injectable } from '@angular/core';
import { ClientsService } from '../services/clients.service';
import { AbstractControl, ValidationErrors } from "@angular/forms";
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class AsyncClientIDValidator {
    constructor(
        private service: ClientsService) {}

    unique(control: AbstractControl ): Observable<ValidationErrors | null>
14.        return this.service.getResourse(control);
    }
}

我在ClientCreate组件中将其用作private validator: AsyncClientIDValidator：

@client-create.component.ts file:
import { IClient } from './../clients/client';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AsyncClientIDValidator } from '../validators/async-clientID.validator';

@Component({
  selector: 'app-client-create',
  templateUrl: './client-create.component.html',
  styleUrls: ['./client-create.component.css']
})
export class ClientCreateComponent {
  temp: IClient;
  clientCreateForm: FormGroup; 

  constructor(
    private fb: FormBuilder,
    private validator: AsyncClientIDValidator
  ){ 
    this.temp = this.ICLientInitializeWithNulls();
    this.clientCreateForm = this.fb.group({
      customerID: [this.temp.customerID,
        Validators.required,
        this.validator.unique]
    });
  }

有人可以帮忙吗？

Answer 1

问题是，您提供了对未绑定validator.unique方法的引用。您可以从两个方向解决问题

使用箭头函数定义方法：

export class AsyncClientIDValidator {
    constructor(
        private service: ClientsService) {}

    unique = (control: AbstractControl ): Observable<ValidationErrors | null> => this.service.getResourse(control);
}

通过使用箭头功能，将在unique上使用固定的上下文创建AsyncClientIDValidator方法。

创建unique方法的绑定函数实例以将其传递到数组中：

export class ClientCreateComponent {
  temp: IClient;
  clientCreateForm: FormGroup; 

  constructor(
    private fb: FormBuilder,
    private validator: AsyncClientIDValidator
  ){ 
    this.temp = this.ICLientInitializeWithNulls();
    this.clientCreateForm = this.fb.group({
      customerID: [this.temp.customerID,
        Validators.required,
        this.validator.unique.bind(this.validator) <----
]
    });
  }

使用此解决方案，您可以将此函数实例的this上下文明确绑定到his.validator的{{1}}值

TypeError：在AsyncValidator中未定义

1 个答案: