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

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


javascript angular forms form-control
person Max Pan    schedule 24.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что вы получаете value вместо control:

Не делайте этого:

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

сделай это:

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

or:

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

or:

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, чтобы избежать всего этого шаблона, создающего FormGroups;
  3. Вместо того, чтобы манипулировать DOM, манипулировать классами, значениями, перебирать элементы, как вы, вы можете просто отключить / установить значение FormArray напрямую;
  4. В чем причина использования this.form.value.items[ind]['controlFactorySelect'].valid без присваивания?

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

person developer033    schedule 24.03.2020
comment
Спасибо, вы очень помогли! - person Max Pan; 24.03.2020
comment
1. Это не полный код, поэтому он нужен мне в других частях 2. Еще не знал об этом, но прочитал об этом 3. Хорошо 4. Теперь я изменю все на то, что вы мне рассказываете , Он должен быть там :) - person Max Pan; 24.03.2020
comment
Привет, @MaxPan, я только что добавил простую демонстрацию с советами, которые я дал. Надеюсь, это вам поможет :) - person developer033; 24.03.2020