Angular响应式表单FormArray结合Material报错：control.setValidators不是函数

报错control.setValidators is not a function的核心原因是filter输入框的表单绑定方式和组件里的FormControl定义不匹配：
要是你在组件里单独声明了filterControl: FormControl = new FormControl('')，但模板里给这个输入框用了formControlName="filter"，可这个filter根本没被注册到外层的FormGroup里，Angular就会在当前上下文乱找，最后拿到的不是合法的FormControl实例，调用setValidators的时候自然就报错了。

根据你组件里的FormControl定义，选对应的绑定方式就行：

• 把filter并入主FormGroup
  组件里构建主表单时，把filter作为FormControl加进去：

  myForm = this.fb.group({
    filter: [''], // 添加filter控件
    items: this.fb.array([]) // FormArray部分不用改
  });
  

  模板里确保输入框在<form [formGroup]="myForm">范围内，用formControlName="filter"：

  <input matInput formControlName="filter" placeholder="Filter">
  

• 直接绑定独立的FormControl
  要是不想把filter放进主FormGroup，模板里就用[formControl]绑定组件里单独声明的控件：
  组件里：

  filterControl = new FormControl('');
  

  模板里：

  <input matInput [formControl]="filterControl" placeholder="Filter">
  

这不是Angular或Angular Material的Bug，就是表单绑定的使用错误。Angular要求formControlName必须对应当前FormGroup/FormArray里已经注册好的控件，不然就会找不到合法的FormControl实例，触发这类方法调用错误。

内容的提问来源于stack exchange，提问作者AlexB