'Pushing Data As An Array in a Dynamic Table with Multi Select Mat-Radio-Group
I'm trying to create a multi-select table that is populated into a larger form (a different [StackBlizt][1] example) . I need the data to save in Firestore as an array but it's returning null.
<table id="assessmentsTable" mat-table [dataSource]="dataSource">
<mat-radio-group formControlName="practicalBusiPlanArray">
<ng-container matColumnDef="name" >
<th class="headerCell" mat-header-cell *matHeaderCellDef>Business Plan Sections</th>
<td style="width: 175px;" mat-cell *matCellDef="let practicalBusinessPlanTable">{{practicalBusinessPlanTable.name}}</td>
</ng-container>
<ng-container matColumnDef="doesNotExist">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Does not exist</th>
<td class="radioButtonCell" mat-cell *matCellDef="let practicalBusinessPlanTable">
<mat-radio-button [name]="practicalBusinessPlanTable.id" value="0" [checked]="practicalBusinessPlanTable.value == 0" (click)="setBPlanValues()" ></mat-radio-button>
</td>
</ng-container>
<ng-container matColumnDef="NeedsWork">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Needs Work</th>
<td class="radioButtonCell" mat-cell *matCellDef="let practicalBusinessPlanTable">
<mat-radio-button [name]="practicalBusinessPlanTable.id" value="1" [checked]="practicalBusinessPlanTable.value == 1 " (click)="setBPlanValues()"></mat-radio-button>
</td>
</ng-container>
<ng-container matColumnDef="GoodtoGo">
<th class="headerCell" mat-header-cell *matHeaderCellDef>Good to go</th>
<td class="radioButtonCell" mat-cell *matCellDef="let practicalBusinessPlanTable">
<mat-radio-button [name]="practicalBusinessPlanTable.id" value="2" [checked]="practicalBusinessPlanTable.value == 2" (click)="setBPlanValues()"></mat-radio-button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-radio-group>
</table>
The form uses Angular mat-material and formControl. I'm currently using a function setBPlanValues() that should push the data of the array in the same format as the practicalBusinessPlanTable (along with the newly set value) to the formControlName. However, the function isn't working, on Click is causing only 1 option in the entire table to be selected, vs. one per row and is only pushing the data as that single value like [practicalBusiPlanArray: 1], not an array. How to get the data to push as an array?
displayedColumns: string[] = ['name', 'doesNotExist', 'NeedsWork', 'GoodtoGo'];
dataSource: MatTableDataSource<tableValues>;
practicalBusinessPlanTable: tableValues[] = [
{id: 'practicalBusiPlanExecSum', name: 'Executive Summary', value: 0},
{id:'practicalBusiPlanMisVisGoal', name: 'Mission, Vision & Goal', value: 0}
]
assessmenForm() {
this.assessmentForm = this.fb.group({
practicalBusiPlanArray: [null, Validators.required]
)};
setBPlanValues(){
debugger
this.dataSource.data.forEach(row => this.practicalBusiPlanArray.push(row));
console.log("good")
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
