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!