How to separate control disabled button in a nested form array in angular?-CodePudding

I have a problem for complex dynamic form. The problem is that I cannot disabled each session button. The rule is that the maximum of each session has 4 quota. If it reach 4 quota, it will disabled that session "Assign more Quota" button. My problem is that it disabled with another session "Assign more Quota" button in that same time. The another session does not reach 4 quota. How to separate control on disable button?

Also, there has another rule is that the minimum of each session quota should be at least 1 quota. If it reach 1 quota only, it will disabled that session "Delete Quota" button. The problem also same as assign more quota. That button will also trigger all session.

Here's a: StackBlitz

CodePudding user response：

For your requirement you cannot use a single variable for each form array element. You have to change the condition in [disabled]. Try the code below.

<button [disabled]="sessionFormArr.get('enrolTypeList')[ 'controls'].length>=4" type="button" style="margin-top: 15px;width: 180px;" (click)=" addNewAssignQuota(sessionFormArr.get('enrolTypeList')) " > 
    assign More Quota 
</button>


<button [disabled]="sessionFormArr.get('enrolTypeList')[ 'controls'].length <= 1" type="button" (click)=" deleteAssignQuota( sessionFormArr.get('enrolTypeList'), j ) " >
    Delete Quota
</button>

The above code works fine with the stackblitz code.