Angular FormArray是否允许重复值？重复值被拒的解决办法

首先明确一点：Angular的FormArray本身完全允许重复值，它只是一个用来管理表单控件集合的容器，默认不会自动过滤或拒绝重复的内容。你遇到的“重复值被拒绝、仅保留唯一值”的情况，几乎可以肯定是你代码里的自定义逻辑、验证器，或者第三方组件的配置导致的，不是FormArray的默认行为。

可能的原因及解决办法 #

我帮你梳理几个常见的排查方向：

1. 检查添加控件的逻辑
   很多时候开发者会不小心在添加控件前加了去重判断，比如这样：

// 错误示例：手动过滤重复值
const newValue = 'test';
if (!this.myFormArray.value.includes(newValue)) {
  this.myFormArray.push(new FormControl(newValue));
}

如果是这种情况，直接去掉判断逻辑，直接添加控件即可：

// 正确：允许重复值添加
this.myFormArray.push(new FormControl(newValue));

2. 排查自定义验证器
   如果你给FormArray加了自定义验证器，可能里面包含了禁止重复值的逻辑，比如：

// 示例：限制重复值的自定义验证器
function uniqueItemsValidator(control: FormArray): ValidationErrors | null {
  const values = control.value;
  if (values.length !== new Set(values).size) {
    return { duplicates: 'Values must be unique' };
  }
  return null;
}

如果不需要这个限制，只要把这个验证器从FormArray的配置中移除就好。

3. 检查模板或第三方组件
   如果你的模板里用了第三方表单组件，或者自定义指令，有些组件可能默认开启了去重功能。这时候需要查看组件的文档，关闭对应的去重配置；另外也可以检查*ngFor的渲染逻辑，有没有不小心过滤掉重复控件的情况。

完整示例：创建支持重复值的FormArray #

这里给你一个简单的示例，演示FormArray如何正常保留重复值：

import { Component } from '@angular/core';
import { FormBuilder, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-duplicate-formarray',
  template: `
    <form [formGroup]="demoForm">
      <div formArrayName="tags">
        <div *ngFor="let tag of tags.controls; index as i">
          <input [formControlName]="i" placeholder="Enter tag">
        </div>
      </div>
      <button (click)="addTag('angular')">Add 'angular' (duplicate allowed)</button>
      <p>Current tags: {{ tags.value | json }}</p>
    </form>
  `
})
export class DuplicateFormArrayComponent {
  demoForm = this.fb.group({
    tags: this.fb.array([])
  });

  get tags() {
    return this.demoForm.get('tags') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  addTag(tagValue: string) {
    this.tags.push(new FormControl(tagValue));
  }
}

点击按钮多次添加angular，你会看到FormArray的value数组里会有多个相同的字符串，完全不会被过滤。

总结 #

FormArray本身对重复值没有限制，你遇到的问题是代码中的自定义逻辑导致的。按照上面的方向排查，去掉对应的去重限制就能解决问题啦。

内容的提问来源于stack exchange，提问作者bharath bhushan