javascript Angular 4 - validator自定义函数this is undefined

esyap4oy  于 2023-03-28  发布在  Java
关注(0)|答案(3)|浏览(186)

我正在构建一个应用程序与组件FormComponent. inside我使用的React式表单模块从角的核心,并创建一个自定义验证器.该函数是调用另一个函数使用this -因为我以为它会引用FormComponent,但它指的是'undefined'(?)
onInit中的代码定义了FormGroup和FormControl,而onInit之外的代码定义了函数

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  formInsurance:FormGroup;
  private id:FormControl;

  constructor(){}

  ngOnInit() {

    this.id = new FormControl('',[
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
      Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
      this.foo
    ]);

    this.formInsurance = new FormGroup({
      id:this.id      
    })

  }

  foo(control:FormControl){
  this.boo();
  if(control.value){
    return {
      objToReturn: {
          returned: name
      }
    };
  }
  return null
}

boo(){
  console.log('boo')

}

}

nbnkbykc

nbnkbykc1#

当从FormControl内部调用foo方法时,foo方法中的上下文没有引用FormComponent。
您可以使用bind自行设置上下文来修复此行为:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  formInsurance:FormGroup;
  private id:FormControl;

  constructor(){}

  ngOnInit() {

    const id = new FormControl('',[
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
      Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
      this.foo.bind(this)
    ]);

    this.id = id;

    this.formInsurance = new FormGroup({
      id
    })
  }

  foo(control:FormControl) {
    this.boo();
    if(control.value){
        return {
          objToReturn: {
              returned: name
          }
        };
      }
    return null
  }

  boo(){
    console.log('boo')

  }
}
ryevplcw

ryevplcw2#

当然,另一种选择是arrow函数,它自动绑定到this上下文:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  formInsurance:FormGroup;
  private id:FormControl;

  constructor() {}

  ngOnInit() {
    this.id = new FormControl('',[
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
      Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
      this.foo
    ]);

    this.formInsurance = new FormGroup({
      id:this.id      
    })
  }

  foo = (control: FormControl): ValidationErrors => {
    this.boo();
    if (control.value) {
      return {
        objToReturn: {
          returned: name
        }
      };
    }
    return null
  }

  boo() {
    console.log('boo')
  }
}
blmhpbnm

blmhpbnm3#

您可以返回所需的函数,从this中获取所需的值作为参数,然后返回所需的函数。
在您示例中,它看起来像这样:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  formInsurance: FormGroup;
  private id: FormControl;

  constructor() { }

  ngOnInit() {

    this.id = new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
      Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
      this.foo(this.boo)
    ]);

    this.formInsurance = new FormGroup({
      id: this.id
    })
  }

  foo(boo) {
    return (control: FormControl) => {
      boo();
      if (control.value) {
        return {
          objToReturn: {
            returned: name
          }
        };
      }
      return null
    }
  }

  boo() {
    console.log('boo')
  }

相关问题