.setErrors не является функцией, для FormControls в Angular

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

}

Как видите, у меня есть FormArray of FormGroups, который содержит несколько FormControls, поэтому после вызова controlSelectChanged () мне нужно установить значение по умолчанию для некоторых FormControls выбранной FormGroup и изменить их 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);

---

Если бы я мог дать вам несколько советов:

1. Вам не нужна переменная itemCounter, вы можете просто использовать FormArray#length;
2. Вы можете использовать FormBuilder, чтобы избежать всех этот шаблон создает FormGroup s;
3. Вместо того, чтобы манипулировать DOM, манипулировать классами, значением, l oop над элементами, как вы это сделали, вы можете просто отключить / установить значение FormArray напрямую;
4. В чем причина использования this.form.value.items[ind]['controlFactorySelect'].valid без назначения?

Я сделал простой образец Stackblitz с советами, которые я дал.