Looking to develop an interface for creating a matrix, which requires two inputs for width and height. The matrix of inputs will vary based on these dimensions.
I'm facing a challenge in making these inputs unique so they can be correctly associated with the matrix in the class.
Anyone have a solution for creating a two-way data-bound matrix? Any tips would be appreciated as well.
I started working with FormGroup but then came across FormArray. However, I couldn't find anything like FormMatrix, which is unfortunate.
Here's a snippet of the HTML code:
<p *ngFor="let itemX of createArrayAndFill(thirdData.x);">
<mat-form-field *ngFor="let itemY of createArrayAndFill(thirdData.y);">
<input [(ngModel)]="thirdData.matrix[itemX][itemY]" matInput name="item--{{itemX}}--{{itemY}}"
placeholder="Value {{itemX}} {{itemY}}" formControlName="matrixControl">
</mat-form-field>
</p>
Incorporating some JavaScript logic into the mix:
createArrayAndFill(n: number) {
return Array(n).fill(0).map((item, i) => i)
}
thirdData = {
x: 3, y: 3, matrix: [[1.1, 0.8, 0.9],
[6.1, 3.2, 0.4],
[-0.4, 0.2, 8.7]]
}
This setup is built using Angular version 7.