请求改造Angular页面：实现表单与结果的分步显示

Got it, let's build that step-by-step form flow for your Angular app. Here's exactly how to implement the progressive reveal you need—starting with the first section, then the second, then the search button, and finally the results table.

1. Add State Variables & Validation Methods to Your Component #

First, open your component's .ts file and add these variables to control what's visible at each step, plus helper methods to check if each section is complete:

// In your component class (e.g., query.component.ts)
showFirstSection = true;
showSecondSection = false;
showSearchButton = false;
showResults = false;

// Check if first section (env, username, password) is filled out
isFirstSectionComplete(): boolean {
  return this.env && this.username.trim() !== '' && this.password.trim() !== '';
}

// Check if second section (type, at least one checkbox, date) is filled out
isSecondSectionComplete(): boolean {
  return this.type && this.groupesTable.some(g => g.checked) && this.date;
}

// Switch to the second section when first is complete
goToSecondSection() {
  if (this.isFirstSectionComplete()) {
    this.showSecondSection = true;
  } else {
    // Optional: Add a user alert here, like alert('Please fill all fields in the first section!')
  }
}

// Enable the search button once second section is ready
enableSearchButton() {
  this.showSearchButton = this.isSecondSectionComplete();
}

// Update your postParams method to show results after querying
postParams() {
  // Keep your existing API call/logic here...
  
  // Once the query finishes, show the results table
  this.showResults = true;
}

2. Modify the HTML Template for Step-by-Step Display #

Update your template to use *ngIf to conditionally show each section, and add a "Next" button to move from the first to second section:

<div class="container">
  <!-- First Section: Environment, Username, Password -->
  <div class="row" *ngIf="showFirstSection">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <label> Choose an environment </label> <br>
          <select [(ngModel)]="env" required (change)="onChangeEnv($event.target.value.toLowerCase())">
            <option selected>Choose an environment</option>
            <option *ngFor="let x of environmentsTable" > {{x.nom | uppercase}} </option>
          </select> <br><br>
          <label>Username</label> <br>
          <input type="text" [(ngModel)]="username" /> <br>
          <label>Password</label> <br>
          <input type="password" [(ngModel)]="password" /> <br><br>
          <!-- Next button to move to second section (disabled until first section is complete) -->
          <button class="btn btn-secondary" (click)="goToSecondSection()" [disabled]="!isFirstSectionComplete()">
            Next
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Second Section: Type, Checkboxes, Date Picker -->
  <div class="row" *ngIf="showSecondSection">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <label> Choose a type </label> <br>
          <select [(ngModel)]="type" required (change)="onChange($event.target.value.toLowerCase()); enableSearchButton()">
            <option [ngValue]="null">Choose a type</option>
            <option *ngFor="let x of typesTable" > {{x.nom_type | uppercase}} </option>
          </select>
        </div>
        <div *ngFor="let x of groupesTable">
          <input type="checkbox" [(ngModel)]="x.checked" (change)="foo(); enableSearchButton()"> {{x.nom_groupe | uppercase}}
        </div>
        <dp-date-picker [(ngModel)]="date" [config]="dateConfig" (ngModelChange)="enableSearchButton()"></dp-date-picker> <br><br>
      </div>
    </div>
  </div>

  <!-- Search Button (only visible when second section is complete) -->
  <div class="row" *ngIf="showSearchButton">
    <button class="btn btn-primary" (click)="postParams()" style="margin-left:40%;margin-right:40%"> Search</button>
  </div> <br>

  <!-- Results Table (only visible after clicking Search) -->
  <div class="table-wrapper-scroll-y my-custom-scrollbar" *ngIf="showResults">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Type</th>
          <th>Entité</th>
          <th>Modifié par</th>
          <th>Date de modification</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let x of respTest">
          <th>{{x.Type}}</th>
          <td>{{x.Entit}}</td>
          <td>{{x.Modif}}</td>
          <td>{{x.DateModif}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

How It Works: #

• By default, only the first section is visible (since showFirstSection starts as true).
• The "Next" button stays disabled until the user selects an environment and fills in both username/password. Clicking it shows the second section.
• As the user interacts with the second section (selects a type, checks a box, picks a date), the enableSearchButton() method runs automatically. Once all required fields are filled, the search button appears.
• After clicking "Search", your postParams() method runs your query, and then the results table is displayed.

You can tweak the validation logic (like adding more strict checks) or add error messages if needed—this setup gives you a solid foundation for the step-by-step flow you wanted.

内容的提问来源于stack exchange，提问作者Med Anis