.setErrors 不是函数，对于 Angular 中的 FormControls

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，其中包含几个 FormControl，因此在调用 controlSelectChanged() 后，我需要为所选 FormGroup 的某些 FormControl 设置默认值，并将其 ValidationStatus 更改为有效。但是每次我都会出错。

Answer 1

问题是您得到的是 value 而不是 control:

不要这样做：

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);

如果我可以给你一些提示：

你不需要 itemCounter 变量，你可以只使用 FormArray#length;
您可以使用 FormBuilder 来避免所有这些样板文件创建 FormGroup；
您可以直接 disable/set 直接对 FormArray 赋值，而不是像您那样操纵 DOM、操纵类、值、遍历元素；
不赋值使用this.form.value.items[ind]['controlFactorySelect'].valid的原因是什么？

我用我给的提示做了一个简单的Stackblitz sample。

.setErrors 不是函数，对于 Angular 中的 FormControls

.setErrors is not a function, for FormControls in Angular

javascript

forms

form-control

angular