表单控制角度隐藏/显示表单字段

Question

我有一个反应式表单，我想分步骤显示。验证第一个字段后，表单将显示下一个字段。作为 Angular 的新手，该表单在某些情况下有效。当表单字段更改为特定选项时，就会出现问题。问题之一可能是表单有一些变量，用户可以选择 (A,B)，但表单有其他选择，导致其他字段。

示例：如果表单有一个下拉列表，并且用户选择选项 (A)，我只想显示与选择相关的下一个字段。如果用户选择选项 (B)，我想显示不同的字段。如果用户从 A 更改为 B，表单应隐藏与选择无关的字段。这是我的代码示例。

提前致谢！

<div class="form-group">
  <label class="label" for="propertyType">Property Type</label>
  <select class="field" id="propertyType" formControlName="propertyType">
    <option value="" disabled>Commercial or Residential?</option>
    <option value="commercial">Commercial</option>
    <option value="residential">Residential</option>
  </select>
  <div
    *ngIf="
      leadForm.get('propertyType')?.invalid &&
      leadForm.get('propertyType')?.touched
    "
  >
    Property type is required.
  </div>
</div>

<!-- Transaction Type -->
<div class="form-group" *ngIf="leadForm.get('propertyType')?.valid">
  <i class="fa-solid fa-clipboard-list" style="text-align: center"></i>
  <label class="label" for="transactionType">Transaction Type</label>
  <select class="field" id="transactionType" formControlName="transactionType">
    <option value="" disabled selected>Purchase or Refinance?</option>
    <option value="purchase">Purchase</option>
    <option value="refinance">Refinance</option>
  </select>
  <div
    *ngIf="
      leadForm.get('transactionType')?.invalid &&
      leadForm.get('transactionType')?.touched
    "
  >
    Transaction type is required.
  </div>
</div>

<!-- Under Contract (Purchase Only) -->
<div
  class="form-group"
  *ngIf="selectedType === 'purchase' && leadForm.get('transactionType')?.valid"
>
  <label class="label" for="underContract">Are you under contract?</label>
  <select class="field" id="underContract" formControlName="underContract">
    <option value="" disabled selected>Yes or No?</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
  <div
    *ngIf="
      leadForm.get('underContract')?.invalid &&
      leadForm.get('underContract')?.touched
    "
  >
    Please select if you are under contract.
  </div>
</div>

<!-- Purchase Price (if under contract) -->
<div
  class="form-group"
  *ngIf="selectedType === 'purchase' && leadForm.get('underContract')?.valid"
>
  <label class="label" for="purchasePrice">Purchase Price</label>
  <input
    type="text"
    class="field"
    id="purchasePrice"
    formControlName="purchasePrice"
    placeholder="Enter Purchase Price"
  />
  <div
    *ngIf="
      leadForm.get('purchasePrice')?.invalid &&
      leadForm.get('purchasePrice')?.touched
    "
  >
    Purchase price is required.
  </div>
</div>

<!-- Loan Amount -->
<div class="form-group" *ngIf="leadForm.get('purchasePrice')?.valid">
  <label class="label" for="loanAmount">Loan amount requested</label>
  <input
    type="text"
    class="field"
    id="loanAmount"
    formControlName="loanAmount"
    placeholder="Enter loan amount"
  />
  <div
    *ngIf="
      leadForm.get('loanAmount')?.errors?.['required'] &&
      leadForm.get('loanAmount')?.touched
    "
  >
    Loan amount is required.
  </div>
  <div
    *ngIf="
      leadForm.get('loanAmount')?.errors?.['minDigits'] &&
      leadForm.get('loanAmount')?.touched
    "
  >
    Loan amount must be at least 6 digits.
  </div>
</div>

我尝试使用 *ngIf="selectedType === 'purchase' 告诉表单接下来要定位/显示哪个字段。还尝试使用是/否选项来添加接下来正确的字段。我不知道要使用哪个 formControlName或者即使我走在正确的轨道上。

我还尝试在我的 TS 文件中创建步骤。

Answer 1

您可以遵循一些准则来帮助您实现此行为。

---

首先，不要使用

*ngIf

来隐藏/显示，因为当创建/销毁表单元素时，可能会导致绑定问题和其他问题。

而是使用

[hidden]

与

*ngIf

交换，您所需要做的就是反转条件。假设

*ngIf="test === 'a'

将更改为

[hidden]="test !== 'a'"

。

---

将公共字段分组到公共

div

中并应用隐藏条件。

<div [hidden]="test !== 'a'">
  <!-- many form fields for a single step -->
</div>

---

如果分组看起来很难看，您可以将表单字段分组为单独的组件。但是您需要在子组件内有另一个

formGroup

和表单，并且

formGroup

应作为输入传递给子组件。