Angular 7 and Form Arrays disable a button of a form group if the related form group is not valid is giving an error of undefined

Question

I am having a form array generating form controls for each row with a button.

I need to disable the related button if the related form group in the form array is not valid.

The button is:

<button mat-raised-button color="warn" type="submit" color="warn" (click)="addDist(element, i)">
                <mat-icon>add</mat-icon> Add
</button>

With the array form:

this.arrayGroup = new FormGroup({
  distribution: new FormArray(this.dataSource.data.map(x => new FormGroup({
    actual_date: new FormControl('', Validators.required),
    note: new FormControl(''),
    kit: new FormControl('', Validators.required)
  })
  ))
});

So in each row I need to disable it until the date and kit are filled. Other button should stay invalid if their forms are not filled.

I tried:

<button mat-raised-button color="warn" [disabled]="!arrayGroup.get('distribution')).at(i).valid" type="submit" color="warn" (click)="addDist(element, i)">
                <mat-icon>add</mat-icon> Add
</button>

But got an error of:

Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected token ')' at column 32 in [!arrayGroup.get('distribution')).at(i).valid]

Then I tried:

[disabled]="!arrayGroup.distribution.at(i).valid"

And I got:

ERROR TypeError: Cannot read property 'at' of undefined at Object.eval [as updateDirectives]

Answer 1

It's a syntax error. There is one bracket too much in your code.

Here is the updated code:

[disabled]="!arrayGroup.get('distribution').at(i).valid"