如何让Angular中ngFor至少渲染1项，保证动态表单默认至少保留1个可用字段

下面是两种可直接落地的实现方式：

方案1：初始化表单时预置1个空表单项（最推荐，符合Angular表单设计逻辑） #

直接从数据源层面保证FormArray长度始终≥1，不需要额外修改模板逻辑：

• 组件初始化阶段，给手机号对应的FormArray默认push1个空的FormGroup/FormControl
• 删除逻辑加判断：只有当FormArray长度>1的时候才允许执行删除操作，保证永远至少留1个可用项

组件类代码示例：

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

phoneFormArray: FormArray = this.fb.array([]);

ngOnInit() {
  // 初始化默认添加1个空手机号项
  this.addPhoneItem();
}

// 新增手机号表单项
addPhoneItem() {
  this.phoneFormArray.push(this.fb.group({
    phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]]
  }));
}

// 删除手机号表单项
removePhoneItem(index: number) {
  if (this.phoneFormArray.length > 1) {
    this.phoneFormArray.removeAt(index);
  }
}

模板代码示例：

<div *ngFor="let control of phoneFormArray.controls; let i = index">
  <input type="text" [formControl]="control.get('phone')" placeholder="请输入手机号">
  <button (click)="removePhoneItem(i)" *ngIf="phoneFormArray.length > 1">删除</button>
  <button (click)="addPhoneItem()" *ngIf="i === phoneFormArray.length - 1">新增手机号</button>
</div>

方案2：模板层面强制至少渲染1次（适配不想改数据源的场景） #

如果不想改动组件内的表单初始化逻辑，可直接在模板层调整ngFor的迭代源，实现n+1次渲染：

• 给ngFor的迭代数组加兜底逻辑：如果原数组长度为0，就用包含1个空元素的临时数组替代

<div *ngFor="let control of phoneFormArray.controls.length ? phoneFormArray.controls : [null]; let i = index">
  <input 
    type="text" 
    [formControl]="i < phoneFormArray.controls.length ? control.get('phone') : createNewPhoneControl()"
    placeholder="请输入手机号"
  >
</div>

注意该方案需要额外处理临时项的表单绑定、数据同步逻辑，可维护性不如方案1

内容的提问来源于stack exchange，提问作者Megan Tan