Angular同组件内表单数据按需展示至弹窗问题求助

I get that you want to skip creating extra components and display only completed form fields in a clean, readable format instead of raw JSON. Let's adjust your current code step by step to make this work.

Step 1: Update Your Component TS Code #

First, we'll add a method to filter out empty form values and map field keys to the friendly labels you need. Below are examples for both common Angular form approaches:

For Reactive Forms (Recommended) #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;
  showPopup = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // Initialize your form with matching controls
    this.form = this.fb.group({
      requestorTower: [''],
      caseNumber: [''],
      purposeOfVisit: [''],
      neededResources: ['']
    });
  }

  // Filter and format form data for the popup
  getFilteredFormData() {
    const formValues = this.form.value;
    // Map technical keys to friendly labels and exclude empty values
    return Object.entries(formValues)
      .filter(([_, value]) => value && value.trim() !== '')
      .map(([key, value]) => {
        const labelMap: { [key: string]: string } = {
          requestorTower: "Requestor's Tower",
          caseNumber: "Case Number",
          purposeOfVisit: "Purpose of Visit",
          neededResources: "Needed Resources"
        };
        return { label: labelMap[key], value: value };
      });
  }

  // Trigger popup (use your existing open logic here)
  openPopup() {
    this.showPopup = true;
  }
}

For Template-Driven Forms #

If you're using template-driven forms, adjust the method to pull values from template references:

import { Component, ViewChild } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  showPopup = false;

  @ViewChild('requestorTower') requestorTower: NgModel;
  @ViewChild('caseNumber') caseNumber: NgModel;
  @ViewChild('purposeOfVisit') purposeOfVisit: NgModel;
  @ViewChild('neededResources') neededResources: NgModel;

  getFilteredFormData() {
    const formFields = [
      { label: "Requestor's Tower", control: this.requestorTower },
      { label: "Case Number", control: this.caseNumber },
      { label: "Purpose of Visit", control: this.purposeOfVisit },
      { label: "Needed Resources", control: this.neededResources }
    ];

    return formFields
      .filter(field => field.control.value && field.control.value.trim() !== '')
      .map(field => ({ label: field.label, value: field.control.value }));
  }

  openPopup() {
    this.showPopup = true;
  }
}

Step 2: Update Your Component HTML #

Replace your current JSON popup display with a dynamic list that only renders filled fields:

<!-- Your existing form (adjust for Reactive/Template-Driven as needed) -->
<form [formGroup]="form" class="form-row align-items-center">
  <div class="form-group">
    <label>Requestor's Tower</label>
    <input formControlName="requestorTower" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label>Case Number</label>
    <input formControlName="caseNumber" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label>Purpose of Visit</label>
    <textarea formControlName="purposeOfVisit" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label>Needed Resources</label>
    <input formControlName="neededResources" type="text" class="form-control">
  </div>
  <button (click)="openPopup()" class="btn btn-primary">Show Popup</button>
</form>

<!-- Popup (style with CSS or use Angular Material/Bootstrap as you prefer) -->
<div class="popup-overlay" *ngIf="showPopup">
  <div class="popup-content">
    <h3>Submitted Details</h3>
    <div *ngFor="let field of getFilteredFormData()" class="popup-field">
      <strong>{{ field.label }}:</strong> {{ field.value }}
    </div>
    <button (click)="showPopup = false" class="btn btn-secondary mt-3">Close</button>
  </div>
</div>

How It Works #

• The getFilteredFormData() method first captures all form values, filters out empty/whitespace-only entries, then maps technical field keys to your desired friendly labels.
• The popup uses *ngFor to loop through the filtered array, so only filled fields appear.
• All logic stays within your existing component—no extra components required.

This will produce exactly the format you want:

Requestor's Tower: Clown
Case Number: 328792892
Purpose of Visit: Felt like dropping by.
Needed Resources: Tool Cart

内容的提问来源于stack exchange，提问作者575-1138