Use one textarea to update multiple variables

I have a webpage containing a form where for each question, the user enters a numerical response and some additional comments. The comments are currently inputted in an input type="text", but to allow for more space, I want to open a dialog with a larger textarea when the input box is clicked.

I would like to create one dialog popup box containing the textarea, which is bound using ngModel to a variable depending on which comment input box is clicked. A JS implementation would also work though.

This is what I have so far:

form-page.component.html

<br><br>
<p-card class="p-fluid">
<ng-template pTemplate="title">
<span style="color:#00a499;">Maximum Demand (MVA)</span>
</ng-template>
<ng-template pTemplate="content">
<div class="formgrid grid">
<div class="field col">
<label for="remarks_max_demand">Remarks</label>
<input #remarks_max_demand="ngModel" type="text" pInputText
id="remarks_max_demand"
[(ngModel)]="currentRemark"
(click)="openRemarksDialog();setRemark(data.generalData.max_demand.remarks_max_demand)" />
</div>
</div>
</ng-template>
</p-card>

<br><br>
<p-card class="p-fluid">
<ng-template pTemplate="title">
<span style="color:#00a499;">Total Installed Capacity (MVA)</span>
</ng-template>
<ng-template pTemplate="content">
<div class="formgrid grid">
<div class="col-12">
<h4 style="text-align: left;">Grid</h4>
</div>
<div class="field col">
<label for="remarks_TIC_grid">Remarks</label>
<input type="text" pInputText id="remarks_TIC_grid" [(ngModel)]="data.generalData.total_installed_capacity.remarks_TIC_grid"
(click)="openRemarksDialog();setRemark(data.generalData.total_installed_capacity.remarks_TIC_grid)"/>
</div>
</div>

<p-dialog
[(visible)]="visible"
[style]="{ width: '600px' }"
header="Remarks"
[modal]="true"
styleClass="p-fluid">

<ng-template pTemplate="content">
<div class="field">
<label for="remarks_input">Please type any remarks.</label>
<textarea
id="remarks_input"
rows="10"
cols="30"
pInputTextarea
[(ngModel)]="currentRemark"
>
</textarea>
</div>
</ng-template>

<ng-template pTemplate="footer">
<p-button
label="Continue"
icon="pi pi-arrow-right"
[text]="true"
(onClick)="hideRemarksDialog()" />
</ng-template>
</p-dialog>


form-page.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { FormBuilder, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { MessageService } from 'primeng/api';
import { EvaluationService } from './service/data';
import { Dropdown } from 'src/app/models/dropdown.model';
import { DropdownService } from 'src/app/services/dropdown.service';
import { FilterInput, PagedResultDto } from 'src/app/models/custom.model';
import { DefinitionLibrary } from 'src/app/models/definition-library.model';
import { DefinitionLibraryService } from 'src/app/services/definition-library.service';
import { TableLazyLoadEvent } from 'primeng/table';

@Component({
selector: 'app-form-page',
templateUrl: './form-page.component.html',
styleUrl: './form-page.component.scss'
})
export class FormPageComponent implements OnInit {
data: any;
currentRemark!: any

constructor(public messageService: MessageService, public evaluationService: EvaluationService, private dropdownService: DropdownService, private definitionLibraryService: DefinitionLibraryService, private router: Router) { };

openRemarksDialog() {
this.visible = true;

}

setRemark(data?: any){
this.currentRemark = data;
}

getRemark(){
return this.currentRemark;
}

hideRemarksDialog() {
this.visible = false;
}

ngOnInit(): void {
this.getOpuDropdown();
this.data = this.evaluationService.getEvaluationData()
}
}


The above works for the first remarks box (remarks_max_demand), but not for the others. How can I get it to work for multiple boxes/variables?

Thank you!

Continue reading...