运行时的角度属性 null答案

【问题标题】：Angular property null at runtime运行时的角度属性 null
【发布时间】：2020-01-24 12:11:37
【问题描述】：

我有以下设置：

export class HomePageComponent implements OnInit {
  constructor(private httpClient: HttpClient) {
  }

 nummer: FormControl = new FormControl("", this.nummerValidator());

  firstname: FormControl = new FormControl("", [Validators.minLength(3)]);
  lastname: FormControl = new FormControl("", [Validators.minLength(3)]);

 formGroup: FormGroup = new FormGroup({
    firstname: this.firstname,
    lastname: this.lastname,
  }, this.formGroupValidator());

 ngOnInit() {
  }

 nummerValidator() {
    return (control: FormControl): { [key: string]: any } | null => {
      if (this.checkEmpty(control.value)) {
        this.enableOnNumber();
        return null;
      }
      this.disableOnNumber();
      if (isNaN(control.value)) {
        return {'forbiddenName': {value: control.value}};
      }
      return null;
    }
  }

 enableOnNumber() {
    this.firstname.enable();
    this.lastname.enable();
  }

  disableOnCardNumber() {
    this.firstname.disable();
    this.lastname.disable();
  }

formGroupValidator() {
    return (control: FormGroup): { [key: string]: any } | null => {
      //someStuffHere
      return errorFound ? {'formGroupError': true} : null;
    }
  }

当我以这种方式运行它并加载页面时，我收到一条错误消息，指出函数 enableOnNumber 中的 this.firstname 和 this.lastname 为空。请注意，函数 disableOnNumber 工作正常。

但是，当我在没有验证器的情况下初始化数字 FormControl 并在 ngOnInit 函数中设置验证器时，一切正常。这是为什么？有什么解释吗？

它是这样工作的：

nummer: FormControl = new FormControl();
ngOnInit() {
    this.nummer.validator = this.NummerValidator();
  }

【问题讨论】：

标签： angular typescript form-control

【解决方案1】：

TypeScript 是 JavaScript 的类型化超集，可编译为纯 JavaScript JavaScript 是一种解释型语言，而不是一种编译型语言，浏览器中的解释器会读取 JavaScript 代码，解释每一行并运行它

enableOnNumber() 方法最初在页面加载时由 nummerValidator() 调用，该方法与数字控件验证相关联，并且由于首先声明了数字表单控件，因此也调用了它的验证。

实现以下更改。

  firstname: FormControl = new FormControl('', [Validators.minLength(3)]);
  lastname: FormControl = new FormControl('', [Validators.minLength(3)]);
  nummer: FormControl = new FormControl('', this.nummerValidator());

由于在nummer验证中使用firstname&lastname表单控件，最好先声明这个控件，然后再声明nummer表单控件。

不确定 paybackNummerValidator() 方法是使用名字和姓氏还是添加了适当的空检查。因此不会抛出此错误。

【讨论】：

@Chry007 这对您有帮助吗？或者你有任何疑问？