I am currently attempting to enhance my Angular App by using a button to transfer information to a form upon clicking, rather than the traditional radio buttons or select dropdowns. My objective is to incorporate HTML content into the button (such as Mat-Icon). Unfortunately, I am facing some challenges as I have not been successful in embedding the data into the form without relying on radio buttons, select options, or regular input fields.
Initially, I experimented with the following:
<div class="flex-wrapper" [formGroup]="subForm">
<mat-form-field formControlName="resourceName" >
<input type="button" *ngFor="let res of resources" [value]="res">
</mat-form-field>
</div>
Subsequently, I tried:
<div class="flex-wrapper" [formGroup]="subForm">
<mat-form-field formControlName="resourceName">
<button type="button" *ngFor="let res of resources"[value]="res">
{{res}}
</button>
</mat-form-field>
</div>
Despite testing these two options, neither proved to be effective and I would prefer for the second method to work. The form exists as a subform within a child component of a parent component/form group. Additionally, it is integrated with Angular Material Stepper at the parent level.