I have a specific scenario in my mat-table where I need to display three rows with different placeholder text in each row's column. For example, test1, test2, and test3. What would be the most efficient way to achieve this?
Code Example:
<div formArrayName="rows" *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns">
<span id="edit-cell" [formGroupName]="i">
<mat-form-field id="edit-calc-input">
<label>
<input matInput type="text" [formControlName]="column.attribute">
</label>
</mat-form-field>
</span>
</div>
// Define input fields for template use
public attributesWithFormControls = [
"productNumber",
"name",
"weight",
"amount"
];
ngOnInit() {
this.columns = this.displayedColumns.map(c => c.attribute);
if (this.dataSource === null) {
this.dataSource = new MatTableDataSource([]);
}
// Initialize myForm
this.myForm = this.formBuilder.group({
rows: this.formBuilder.array([this.initItemRows()])
});
}
// Getter for easy access to form fields
get f() {
return this.myForm.controls;
}
get formArr() {
return this.myForm.get("rows") as FormArray;
}
initItemRows() {
return this.formBuilder.group({
productNumber: [""],
name: [""],
weight: [""],
amount: [""]
});
}
You can view my progress on StackBlitz