In this code if I click on edit button the selection menu appears with default value of column.field as set in [formControlName] with name Material Name.The code was working properly in angular 13 but after migrating to angular 14, by clicking on edit button the selection doesn't show its default value. Is there any idea that what's wrong with it?
html:
<div [formGroup]="basketFormGroup" class=" custom-table-style" style="width: 100%;">
<table *ngIf="formArray1" formArrayName="formArray" mat-table [dataSource]="basketLayerData">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.field">
<th mat-header-cell *matHeaderCellDef class="table-header-color">
<div [style]="column.styles">{{column.header}}</div>
</th>
<td mat-cell *matCellDef="let row, let formIndex=index" [formGroupName]="formIndex">
<div fxHide.gt-xs>{{ column.header }} :</div>
<div class="cell-div" [style]="column.styles">
<!-- *ngIf="(editFlag && column.header == 'Code') || (editFlag && column.header == 'Description') " -->
<mat-form-field *ngIf="column.header != 'Material Name' " appearance="outline">
<input type="number" style="color: #1a3d78; font-weight: normal; width: 98%;" matInput
[formControlName]="column.field">
</mat-form-field>
<mat-form-field *ngIf="column.header == 'Material Name'" appearance="outline">
<input *ngIf="!editFlag" type="text" style="color: #1a3d78; font-weight: normal; width: 98%;" matInput
[formControlName]="column.field">
<mat-select *ngIf="editFlag" [formControlName]="column.field">
<!-- <mat-label>{{}}</mat-label> -->
<mat-option *ngFor="let ScrapMaterial of basketInfoService.allScrapMaterials let i=index" [value]="ScrapMaterial.materialName"
(click)="onSelect(formIndex,ScrapMaterial.idMaterial)">
{{ScrapMaterial.materialName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" (click)="onBasketInfoTableClicked(i)"
[ngStyle]="{'background-color': selectedIndex == i ? 'yellow' : 'white' }" class="main-heat-row">
</tr>
</table>
</div>
ts:
formStartup(datasource: any[]) {
let formArrayControl = <UntypedFormArray>this.basketFormGroup.get("formArray");
formArrayControl.controls.length = 0;
let i = 0;
this.basketLayerData.forEach(element => {
// console.log("aa", element.basketMaterialInfoId);
formArrayControl.push(this.fb.group({
materialName: [element.material.materialName, Validators.required],
materialWeight: [element.materialWeight, Validators.required],
materialId: [element.materialId, Validators.required],
basketMaterialInfoId: [element.basketMaterialInfoId],
idBasketInfo: [element.idBasketInfo]
}))
i += 1;
});
this.formSubscription = this.basketFormGroup.get('formArray').valueChanges.subscribe(data => {
})
if (!this.editFlag) {
formArrayControl.disable();
// this.disabledForm = true;
}
}
onEditClicked() {
if (!this.editFlag) {
this.editFlag = true;
this.basketInfoService.editFlag.next(true);
let formArrayControl = <UntypedFormArray>this.basketFormGroup.get("formArray");
formArrayControl.enable();
// clearInterval(this.elecProfService.getElecProfile);
}
else
console.log("edit is already enabled!")
}
onSelect( formIndex: number, idMaterial: number) {
let row = this.formArray1.controls[formIndex];
row.get('materialId').setValue(idMaterial);
}
I used [(value)] for mat-select but still nothing shows.
