Have a form where user enters answers to questions. I want all user entered data to appear in a popup along with the corresponding question. If the user decides not to answer a question I do not want the question or anything associated with that question to appear. I was told this could be done by converting entered data to a json object. I am not sure how to do this or if there is a better way. I want to be able to do it all withing the same component.
I tried doing this How do I create popup with data user enters into a form? but could not figure it out. I also want to be able to achieve this without creating more 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>Clampionship</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label for="caseNumber">Case Number(s): </label>
<textarea class="form-control" name="caseNumber" formControlName="caseNumber" rows="1" placeholder="Separate case numbers by comma"></textarea>
</div>
<div class="form-group">
<label for="visitPurpose">Purpose of Lab Visit: </label>
<textarea class="form-control" name="visitPurpose" formControlName="visitPurpose" rows="1"></textarea>
</div>
<label for="needRescources">Need any Lab Rescource(s)?</label>
<br />
<div class="form-check form-check-inline" name="labRescource" formControlName="labRescource">
<input type="checkbox" class="form-check-input" formControlName="labAdmin">
<label class="form-check-label" for="Lab Admin">Lab Admin </label>
<input type="checkbox" class="form-check-input" formControlName="toolCart">
<label class="form-check-label" for="Tool Cart">Tool Cart </label>
<input type="checkbox" class="form-check-input" formControlName="other">
<label class="form-check-label" for="Other">Other</label>
</div>
<br /><br />
<div class="form-group">
<label for="additionalNotes">Any additional notes? </label>
<textarea class="form-control" name="additionalNotes" formControlName="additionalNotes" rows="1"></textarea>
</div>
</div>
</div>
<p>
Form Value: {{ labForm.value | json }}
</p>
<p>
Form Status: {{ labForm.status }}
</p>
<button type="submit" class="btn btn-default" [disabled]="!labForm.valid">Build Lab Request</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Template</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-left">Lab Access Template</h4>
</div>
<div class="modal-body">
<label for="exampleFormControlSelect1">Requester's Tower:</label>
<br /><label for="caseNumber">Case Number(s): </label>
<br /><label for="visitPurpose">Purpose of Lab Visit: </label>
<br /><label for="needRescources">Need any Lab Rescource(s)?</label>
{{ labForm.value | json }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Copy Template</button>
</div>
</div>
</div>
</div>
//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']
})
/** LabAccess component*/
export class LabAccessComponent {
labForm = new FormGroup({
ControlSelect1: new FormControl(''),
caseNumber: new FormControl('', Validators.required),
visitPurpose: new FormControl('', Validators.required),
/**lab rescource check boxes*/
labAdmin: new FormControl(''),
toolCart: new FormControl(''),
other: new FormControl(''),
});
onSubmit() {
console.warn(this.labForm.value);
}
labAccessForm: FormGroup;
/** LabAccess ctor */
constructor() { }
}
The form data is not appearing on popup in the format I desire. Would like it to look like below.
Requestor's Tower: Clown
Case Number: 328792892
Purpose of Visit: Felt like dropping by.
Needed Resources: Tool Cart
If user did not fill out one of the questions I do not want question appear.
This is how I decided to answer the question. I have a modal popup and the output is generated using this code.
<div *ngIf="form.value.Num1">Part Number(s): {{form.value.Num1}}</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.