Angular响应式表单仅存1个输入项时如何隐藏remove按钮

云原生阿岚

2026-9-26

问题原因

你之前的判断不生效有两个核心问题：

索引变量i是*ngFor循环内部的局部变量，你的remove按钮写在循环外部，根本获取不到i的值，所以判断逻辑完全不生效
你的输入框[formControl]绑定错误，所有输入框目前绑定的是同一个控件，输入内容会同步，需要先修正这个问题

以下是两种可直接落地的实现方案，可根据交互需求选择：

方案1：保留全局单个删除按钮（点击删除最后一个问题）

直接修改按钮的显示判断和点击传参即可：

先修正输入框的控件绑定

<input
  class="form-control ml-3 mt-1"
  [formControl]="question"
  type="text"
/>

给remove按钮外层加长度判断，同时修正点击传参

<div class="d-flex mt-1" *ngIf="(userForm.get('questions') as FormArray).length > 1">
  <mat-icon
    (click)="removeQuestion((userForm.get('questions') as FormArray).length - 1)"
    style="color: #5663ED;cursor:pointer"
    >remove_circle</mat-icon
  >
  <span>Remove</span>
</div>

方案2：每个问题项后配独立删除按钮（更符合常规交互）

把删除按钮移到*ngFor循环内部，这时候i的判断就能正常生效：

修改循环部分代码，把删除按钮嵌入每个问题项

<div
  class="row"
  *ngFor="let question of getQuestionFormControls(); let i = index"
  style="align-items: center;margin-bottom: 8px;"
>
  <span class="ml-3 pt-2">Question {{ i + 1 }}</span>
  <input
    class="form-control ml-3 mt-1"
    [formControl]="question"
    type="text"
  />
  <mat-icon
    *ngIf="i >= 1"
    (click)="removeQuestion(i)"
    style="color: #5663ED;cursor:pointer;margin-left: 8px;"
    >remove_circle</mat-icon
  >
</div>