CODEWITHSUNDEEP
javascriptangularformsform-control
Max Pan
Max Pan

Reputation: 137

.setErrors is not a function, for FormControls in Angular

.setError and other functions with controls causes the same error It shows that they are not functions. Here is my code:

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

}

As you can see I have FormArray of FormGroups which contains few FormControls, so after controlSelectChanged() is called I need to set a default value to some FormControls of selected FormGroup and change their ValidationStatus as Valid. But every time I got an error.

Upvotes: 1

Views: 4176

Answers (1)

developer033
developer033

Reputation: 24874

The problem is that you're getting the value instead of the control:

Don't do this:

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

do this:

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

or, even better:

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

If I could give you some tips:

  1. You don't need itemCounter variable, you can just use FormArray#length;
  2. You can use FormBuilder to avoid all this boilerplate creating FormGroups;
  3. Instead of manipulating DOM, manipulating classes, value, loop over elements, like you did, you can just disable/set value the FormArray directly;
  4. What's the reason to use this.form.value.items[ind]['controlFactorySelect'].valid without assignment?

I've made a simple Stackblitz sample with the tips I gave.

Upvotes: 2

Related Questions