javascript - 对于 Angular 中的 FormControls 来说，.setErrors 不是一个函数

Question

.setError 和其他带有控件的函数会导致相同的错误 这表明它们不是函数。这是我的代码:

export class AppComponent implements OnInit {
  form: FormGroup
  stepCounter: number
  itemCounter: number
  data: dataInterface

  ngOnInit() {
    this.form = new FormGroup({
      companyName: new FormControl('', Validators.required),
      items: new FormArray([])
    })
    this.data = {}
    this.stepCounter = 1
    this.addItem()
  }

  controlSelectChanged(ind) {
    const elementsWithId = [
      'controlSideSelect' + ind,
      'controlFactorySelect' + ind,
      'controlAcceptorSelect' + ind,
      'automaticFactorySelect' + ind,
      'quantityPult' + ind,
      'automaticAdditionSelect' + ind
    ]
    if (this.form.value.items[ind].controlSelect === 'Автоматическое'){
      for (let elementWithId of elementsWithId){
        document.getElementById(elementWithId).removeAttribute('disabled')
      }
    } else {
        let i = 0
        for (let elementWithId of elementsWithId) {
          document.getElementById(elementWithId).setAttribute('disabled', 'disabled');
          if(i === 4){
            (<HTMLInputElement> document.getElementById(elementWithId)).value = '0';
          } else {
            (<HTMLInputElement> document.getElementById(elementWithId)).value = '-';
          }
          // (<HTMLInputElement> document.getElementById(elementWithId)).classList.add('ng-valid');
          // (<HTMLInputElement> document.getElementById(elementWithId)).classList.remove('ng-invalid');
          switch (i) {
                      case 0: {
                        console.log(this.form.value.items[ind]);
                        this.form.value.items[ind]['controlSideSelect'].setErrors(null)//setErrors({'incorrect': false});
                        break;
                      }
                      case 1: {
                        this.form.value.items[ind]['controlFactorySelect'].valid
                        break;
                      }
                      case 2: {
                        this.form.value.items[ind]['controlAcceptorSelect'].valid
                        break;
                      }
                      case 3: {
                        this.form.value.items[ind]['automaticFactorySelect'].valid
                        break;
                      }
                      case 4: {
                        this.form.value.items[ind]['quantityPult'].valid
                        break;
                      }
                      case 5: {
                        this.form.value.items[ind]['automaticAdditionSelect'].valid
                        break;
                      }
                    }
          i++
        }
    }
  }

  addItem() {
    const item = new FormGroup({
      modelSelect: new FormControl('', Validators.required),
      quantity: new FormControl('', [
        Validators.required,
        Validators.pattern("^[0-9]*$")
      ]),
      width: new FormControl('',[
        Validators.required,
        Validators.pattern("^[0-9]*$")
      ]),
      height: new FormControl('', [
        Validators.required,
        Validators.pattern("^[0-9]*$")
      ]),
      colorSelect: new FormControl('', Validators.required),
      factorySelect: new FormControl('', Validators.required),
      articleSelect: new FormControl('', Validators.required),
      articleSelect2: new FormControl('', Validators.required),
      controlSelect: new FormControl('', Validators.required),
      controlSideSelect: new FormControl('', Validators.required),
      controlFactorySelect: new FormControl('', Validators.required),
      controlAcceptorSelect: new FormControl('', Validators.required),
      automaticFactorySelect: new FormControl('', Validators.required),
      quantityPult: new FormControl('',[
        Validators.required,
        Validators.pattern("^[0-9]*$")
      ]),
      automaticAdditionSelect: new FormControl('', Validators.required),
      notes: new FormControl(''),
    });
    (this.form.get('items') as FormArray).push(item)
    this.itemCounter ++
    console.log(this.form.get('items'))
  }

  deleteItem(ind) {
    (this.form.get('items') as FormArray).removeAt(ind)
    this.itemCounter --

}

正如您所看到的，我有 FormGroups 的 FormArray，其中包含很少的 FormControls，因此在调用 controlSelectChanged() 后，我需要为所选 FormGroup 的某些 FormControls 设置默认值，并将其 ValidationStatus 更改为 Valid。但每次我都会出错。

Answer 1

问题是您获取的是值而不是控件:

不要这样做:

this.form.value.items[ind]['controlSideSelect'].setErrors(null);

这样做:

this.form.get('items' as FormArray)[ind]['controlSideSelect'].setErrors(null);

或者:

this.form.get('items').get(ind).get('controlSideSelect').setErrors(null);

或者:

this.form.get('items' as FormArray).at(ind).get('controlSideSelect').setErrors(null);

或者，甚至更好:

this.form.get(`items.${ind}.controlSideSelect`).setErrors(null);

<小时/>

如果我能给你一些提示:

1. 您不需要 itemCounter 变量，只需使用 FormArray#length;
2. 您可以使用 FormBuilder 来避免创建 FormGroup 的所有样板文件；
3. 您可以直接禁用/设置 FormArray 的值，而不是像您那样操作 DOM、操作类、值、循环元素；
4. 使用 this.form.value.items[ind]['controlFactorySelect'].valid 而不进行赋值的原因是什么？

我做了一个简单的Stackblitz sample以及我给出的提示。