In need of a solution where users can input answers to questions and have all the entered data displayed in a popup alongside the respective question. If a user chooses not to answer a question, I do not want that question or any related information to be shown. Suggestions were made about converting the entered data into a json object to achieve this, but I am unsure of how to proceed or if there is a better alternative. It is crucial for me to accomplish this within the same component.
I attempted to implement this using guidance from a resource How do I create popup with data user enters into a form?, without success. Furthermore, I aim to accomplish this task without creating additional components.
//This is the .html file
<div ng-app="DemoApp" ng-controller="DemoController" class="form-row align-items-center">
<div class="col-auto">
<br />
<div class="form-group">
<label for="controlSelect1" >Select your tower...</label>
<select class="form-control" name="exampleFormControlSelect1" formControlName="controlSelect1">
<option></option>
<option>Clown</option>
<option>Championship</option>;
<option>Other</option>
</select>
</div>
<div class="form-group">
// More form elements go here...
</div>
<p>
Form Value: {{ labForm.value | json }}
</p>
// More HTML code goes here...
//This is the .ts file
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from'@angular/forms';
@Component({
selector: 'app-lab-access',
templateUrl: './lab-access.component.html',
styleUrls: ['./lab-access.component.scss']
})
export class LabAccessComponent {
// TypeScript code continues here...
The current format of the form data on the popup does not meet my expectations. Ideally, it should be structured as follows:
Requestor's Tower: Clown
Case Number: 328792892
Purpose of Visit: Felt like dropping by.
Needed Resources: Tool Cart
If a user leaves a question unanswered, I prefer it not to be part of the display.