如何使用可变长度更新 FormArray 值

Question

如果我尝试在 FormArray 为空时设置 FormArray 值：

const array1 = new FormArray([]);
array1.setValue(['']);

我收到此错误：

还没有向该数组注册的表单控件。如果您使用的是 ngModel，您可能需要检查下一个刻度

如果我在有 1 的时候加 2：

const array2 = new FormArray([new FormControl('')]);
array2.setValue(['', '']);

我收到以下错误：

在索引 1 处找不到表单控件

如果我尝试在有 2 时设置 1：

const array3 = new FormArray([new FormControl(''), new FormControl('')]);
array3.setValue(['']);

我收到以下错误：

必须在索引处为表单控件提供一个值：1。

问题：如何编写一个函数来更新具有任意长度列表的表单数组的值？

StackBlitz：https://stackblitz.com/edit/angular-wduzv9?file=src/app/app.component.ts

*编辑 我知道我可以使用push()、at() 和removeAt(0) 方法。我正在寻找一个通用功能。它可以使用任何你想要的方法。

Answer 1

简化你的功能

getFormArray<T>(elements: T[]): FormArray {
    return new FormArray(
      elements.map((x: T) => {
        const obj = new FormGroup({});
        Object.keys(x).forEach(k => {
          obj.addControl(k, new FormControl(x[k]));
        });
        return obj;
      })
    );
  }

//the use, e.g.

this.formArray = this.getFormArray<any>([
  { id: 1, name: "Bob" },
  { id: 2, name: "Peter" }
]);

见stackblitz

Answer 2

问题在于，如果不知道您希望在新索引处的 FormArray 中使用哪种类型的 AbstractControl，则无法在新键或索引处添加新值。

任何解决方案都必须考虑该索引应该是FormControl、FormGroup 还是FormArray，因此我在setFormArrayValue 函数中提供了toSubControl 参数。 （我还提供了一些示例值来提供给这个参数。）

我选择删除所有项目，然后为每个值添加新控件。试图保留已有的控件会产生一些奇怪的行为。

这是我想出的解决方案：

type ControlFactory<T> = (values: T) => AbstractControl;

export function setFormArrayValue<T>(
    array: FormArray,
    values: T[],
    toSubControl: ControlFactory<T> = toFormControl
) {
    while (array.length) {
        array.removeAt(0);
    }
    values
        .map(toSubControl)
        .forEach(function(control) {
            array.push(control);
        });
    return array;
}

其中以下函数可以创建新的子AbstractControls。

// When the child controls should be FormControl
function toFormControl<T>(value: T) {
    return new FormControl(value)
}

// When the child controls should be FormGroup
function toFormGroup<T>(item: T) {
    const fields = Object.entries(item).reduce(function(hash, [key, value]) {
        hash[key] = new FormControl(value);
        return hash;
    }, {});
    return new FormGroup(fields);
}

// When the child controls should be FormArray of FormControls
function toFormArray<T>(values: T) {
    const fields = values.map(value => new FormControl(value));
    return new FormGroup(fields);
}

Answer 3

你可以初始化一个空的formArray，然后添加控件，然后设置值，

const arr = new FormArray([]);

const a = new FormControl('a', []);
const b = new FormControl('b', []);
const c = new FormControl('c', []);

arr.push(a);
arr.push(b);
arr.push(c);

console.log(arr.value);   // ["a", "b", "c"] 
// arr.setValue([0]);

console.log(arr) 
arr.controls[0].setValue('xxx')

console.log(arr.value);   // "xxx", "b", "c"