Getting error 'Property '...' does not exist on type 'AbstractControl'

Question

I have some material buttons in Angular 10 I want to be disabled unless there is a value from a field in a FormArray. I keep getting the error: Property 'querytext' does not exist on type 'AbstractControl'. I tried putting the FormArray in the form of a get function as mentioned in a StackOverflow post but the error keeps occurring.

Here is the html:

<button
        mat-icon-button
        [disabled]="!filterFormArray.controls[0].querytext.value"
        (click)="saveFilter()"
        matTooltip="Save Filter"
        [matTooltipPosition]="'above'"
      >
        <mat-icon>save</mat-icon>
      </button>

Here is the ts:

public saveFilterForm: FormGroup;

public get filterFormArray() {
    return this.saveFilterForm.get('current_filters') as FormArray;
  }

public ngOnInit(): void {
    /* Initiate the form */
    this.saveFilterForm = this.fb.group({
      current_filters: this.fb.array([this.createFilter()]),
    });   
  }

/* initialize form row */
  private createFilter(): FormGroup {
    return this.fb.group({
      querytext: [null, Validators.compose([Validators.maxLength(30)])],
      selectedcolumn: [null, null],
      selectedcondition: [null, null],
    });
  }

What is the right format for checking the field's value in the html?

Answer 1

you need to call the .get() function of the Form instead of

!filterFormArray.controls[0].querytext.value

do

!filterFormArray.controls[0].get('querytext').value