Javascript Typescript:TypeError:无法读取属性'；yc&x27；空的

问题
我正在修补可重用的表单控件，主要是在google上找到的。尽管存在一个小问题，但它仍能正常工作，我在自己的代码之外遇到了一个TypeError： . 奇怪的是，我只在输入字母和数字时得到一个错误提示，而在删除时（如在点击backspace时）没有错误发生。不过，验证和所有其他功能都按预期工作

我尝试的
到目前为止，我们已经厌倦了用可能导致此错误的日志捕获空值，但目前为止运气不佳。确定错误一直是一个问题，因为我找不到javascript内部工作程序yc和T的文档。因此，我并不确切地知道我在钓什么

角度代码


周围的父组件
create-team-page.componenet.html

<form [formGroup]="createTeamForm" (ngSubmit)="submit()">
<app-create-team-form formControlName="team"></app-create-team-form>
<button>Sign Up</button>
</form>

在父级中使用的FormControl子级
孩子的HTML文件

<div [formGroup]="form">

<label for="teamName" i18n="Input label | Label for the team input"> Enter Team Name</label>
<input formControlName="teamName" id="teamName" type="text" placeholder="Test" i18n-placeholder="Team name placeholder | Placeholder fot the team name input"></div>

更新

---

这个错误似乎只发生在chrome中，所以这可能是一个问题。我已经用firefox和edge进行了测试，没有发现任何错误。

因此，像往常一样，问题出现在屏幕前面。原来chrome有点过时了。吸取的教训。

---

因此，对于任何在这个职位上绊倒的人；在寻找更不可能出现的问题之前，请确保所有内容都是最新的。

@Chellappanவ 应与formBuilder一起在构造函数中嵌入。除非我没有解释你的问题。@Chellappanவ 如您所见，formControl（除非我弄错了）的初始化方法是：this.form=this.formBuilder.group（{teamName:[''，Validators.required]，}）；我稍微澄清了一下这个帖子。很抱歉，这是我的误解，你只是正确地执行了。您能否尝试从自定义表单控件中删除此{provide:NG_VALIDATORS，useExisting:forwardRef（（）=>CreateTeamFormComponent），multi:true}并进行检查？对其进行了测试，没有任何区别。该代码段的要点是告诉Angular，该formGroup是自验证的，可以将其状态通知其父级。

<div [formGroup]="form">

<label for="teamName" i18n="Input label | Label for the team input"> Enter Team Name</label>
<input formControlName="teamName" id="teamName" type="text" placeholder="Test" i18n-placeholder="Team name placeholder | Placeholder fot the team name input"></div>

import { Component, OnInit, OnDestroy, forwardRef } from '@angular/core';
import { FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormBuilder, Validator, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

export interface CreateTeamFormValues {
  teamName: string;
}
@Component({
  selector: 'app-create-team-form',
  templateUrl: './create-team-form.component.html',
  styleUrls: ['./create-team-form.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CreateTeamFormComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CreateTeamFormComponent),
      multi: true
    }
  ]
})
export class CreateTeamFormComponent implements ControlValueAccessor, OnDestroy {

  //I would like to use the model directly?
  form: FormGroup;
  subscriptions: Subscription[] = [];

  onChange: any = () => { console.log('ON CHANGE');
  };
  onTouched: any = () => {  console.log('ON TOUCH');
};

  get value(): any {
    return this.form.value;
  }

  set value(value: any) {
    console.log('SET VALUE');
    console.log(value);

    this.form.setValue(value);
    this.onChange(value);
    this.onTouched();
  }

  get teamNameControl() {
    return this.form.controls.teamName;
  }

  constructor(private formBuilder: FormBuilder) {
    // create the inner form
    this.form = this.formBuilder.group({
      teamName: ['',Validators.required],
    });

    this.subscriptions.push(
      // any time the inner form changes update the parent of any change
      this.form.valueChanges.subscribe(value => {
        this.onChange(value);
        this.onTouched();
      })
    );
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }

  registerOnChange(fn: any) {
    console.log('REGISTER CHANGES');
    console.log(this.form)

    this.onChange = fn;
  }

  writeValue(value: any) {
    console.log('WRITE VALUE');

    if (value) {
      this.value = value;
    }

    if (value === null) {
      this.form.reset();
    }
  }


  registerOnTouched(fn: any) {
    console.log('REGISTER TOUCHED');
    console.log(this.form)

    this.onTouched = fn;
  }

  // communicate the inner form validation to the parent form
  validate(_: FormControl) {
    console.log('VALIDATE');
    console.log(this.form.valid);
    return this.form.valid ? null : { team: { valid: false } };
  }

  setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.form.disabled : this.form.enabled;
  }

}