如何在 angular 9 中禁用表单数组的控制项之一

Question

I have a form and in this form in this form I have a formArray .

  InitialFrom(): void {
this.addElectricMoneyFG = this.fromBuilder.group({
  hasAccountNumber: [this.showMoreInfo],
  moreAccountInfo: ['', null],
  description: [''],
  locales: this.fromBuilder.array([]),
  published: [false]
})

the formArray :

selectedLanguage(langId): FormGroup {
return this.fromBuilder.group({
  languageId: [langId],
  name: [''],
  moreAccountInfo: ['']
})

}

When clicking on the toggle I want, moreAccountInfo in the formArray to be disabled .

I wrote this code:

this.f.hasAccountNumber.valueChanges.subscribe(check => {
  this.showMoreInfo = check;
  if (check) {
     this.f.locales['controls'][0]['controls']['moreAccountInfo'].enabled;
  } else {
    this.f.locales['controls'][0]['controls']['moreAccountInfo'].enabled;
  }
  this.f.locales.updateValueAndValidity();
  this.cdRef.detectChanges()
})

It didn't work, threw this error:

this.f.locales.controls[0].controls.moreAccountInfo.disabled is not a function

Answer 1

You need follow this method.

 (<FormArray>this.testForm.get("locales")).controls[0].get('moreAccountInfo').disable()

If you want to disable whole form of index 0.

(<FormArray>this.testForm.get("locales")).controls[0].disable()

Demo