I have a reactive form below where I'm using a form builder with groups.
Fig: https://i.sstatic.net/gdc7p.png
Here is the HTML code of the component
<div class="">
<form [formGroup]="FeedBack" (ngSubmit)="onSubmit()">
<div
class="grid grid-cols-6 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<!-- Add your form fields here -->
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<!-- Your table content goes here -->
</table>
<div
class="grid grid-cols-5 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<!-- Additional form controls and buttons -->
</div>
<pre>{{ FeedBack.value | json }}</pre>
</form>
</div>
The TypeScript file associated with this component is shown below.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
// Define any necessary interfaces or types here
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
// Implement your logic here
}
I am currently facing an issue wherein I need to dynamically update the "VARIABLE NAME" column based on selections made in the property and group dropdowns. I have tried utilizing functions like "setValue", "updateValue", and "patchValue" without success. Any guidance on resolving this issue would be greatly appreciated.