How to enable only particular card button on checkbox selection

Question

I have running Angular 9 and I want to enable button only when checkbox is clicked. I am using bootstrap cards and each card has its own checkbox and button. The problem I am facing is that whenever I click on any card checkbox, every button of the card gets enabled and vice versa. I want only particular card button to gets enabled or disabled.

test.component.html

<div class="col-3" *ngFor="let data of nominationData">
                    <form [formGroup]="nominationForm" (ngSubmit)="acceptNomination($event, data)">
                        <div class="card">
                            <div class="card-header">
                                <div class="title">{{data.contributor.name}}</div>
                            </div>
                            <div class="card-body">
                                <div class="row" style="height: 190px;">
                                    <div class="col-sm-12">
                                        <span class="nomination-title">Project Name: </span><div class="desc">{{data.projectName}}</div>
                                        <span class="nomination-title">Posted Date: </span><div class="desc">{{data.nominatedDateTime | date}}</div>
                                        <span class="nomination-title">Technology: </span>
                                        <div *ngFor="let data of data.technology; let i=index" class="tech">
                                            <input type="checkbox" style="margin-right: 10px;" [value]="data"
                                                (change)="onCheckboxChange($event)" />
                                            <label for="chk" style="font-size: 15px;">{{data}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="buttons">
                                            <button class="btn btn-success" type="submit" [disabled]="!techStack.length">Accept</button>
                                            <button class="btn btn-danger" (click)="rejectNomination(data)">Reject</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </form>
                </div>

test.component.ts

export class TestComponent implements OnInit, OnDestroy {

    public search = '';
    private nominationSubscription: SubscriptionLike;
    nominationForm: FormGroup;
    isLoading = false;
    techStack: string[] = [];
    nominationData: Nomination;

    constructor(private fb: FormBuilder, private projectsService: ProjectsService) {
        this.nominationForm = this.fb.group({
            Technology: this.fb.array([], [Validators.required])
        });
    }

    ngOnInit() {
        this.getNominations();
    }

    getNominations() {
        this.isLoading = true;

        this.nominationSubscription = this.projectsService.getAllNominations().subscribe(
            {
                next: (nominations: Nomination) => {
                    this.nominationData = nominations;
                    this.isLoading = false;
                },
                error: (response) => {
                    this.isLoading = false;
                }
            }
        );
    }

    onCheckboxChange(e) {
        const Technology: FormArray = this.nominationForm.get('Technology') as FormArray;

        if (e.target.checked) {
            Technology.push(new FormControl(e.target.value));
        } else {
            let i = 0;
            Technology.controls.forEach((item: FormControl) => {
                if (item.value === e.target.value) {
                    Technology.removeAt(i);
                    return;
                }
                i++;
            });
        }
        this.techStack = Technology.value;
    }

    async rejectNomination(data) {
        const nomination: Nomination = {
            projectId: data.projectId,
            contributor: { name: data.contributor.name, emailId: data.contributor.emailId },
            // technology: data.technology,
            ProjectName: data.projectName
        };
        await this.projectsService.rejectNomination(nomination);
        this.getNominations();
    }

    async acceptNomination(event, data) {
        if (event.submitter.innerHTML === 'Accept') {
            const nominatedData = {
                ContributorMailId: data.contributor.emailId,
                ProjectId: data.projectId,
                UserType: 'Contributor',
                TechnologiesOpting: this.nominationForm.value.Technology
            };
            await this.projectsService.acceptNomination(nominatedData);
            this.getNominations();
        }
    }

    ngOnDestroy() {
        if (this.nominationSubscription) {
            this.nominationSubscription.unsubscribe();
        }
    }
}

Answer 1

The problem in your code is that you have an array of data in nominationData. But the techStack variable is common to all elements of the array. You should have an array of techStack elements also.

// Initialize techStack to be an array of arrays
techStack: string[][] = [];

// In the getNominations function, once you receive the nomination data, insert empty arrays in techStack.
nominationData.forEach(_ => techStack.push([]))

// Modify the onCheckBoxChange function to take an index to indicate checkbox in which item in the list was clicked.
onCheckboxChange(e, index) {
 ...
 this.techStack[index] = Technology.value;
 ... 
}

// In the html, pass this index to the onCheckBoxChange function

<div class="col-3" *ngFor="let data of nominationData; let index=index">
 .....
 <input
    type="checkbox"
    style="margin-right: 10px;"
    [value]="data"
    (change)="onCheckboxChange($event, index)"
 />
 ....
 ....
 <button
    class="btn btn-success"
    type="submit"
    [disabled]="!techStack[index].length"
 >
  Accept
 </button>
 ..... 
</div>