在Angular 2+中对FormArray对象进行排序的理想方法是什么?

Adn*_*ala 6 angular2-forms angular angular4-forms angular-forms

我有一个由多个表单组组成的formArray。我需要根据数组中每个表单组中存在的布尔值字段对数组进行动态排序。

布尔值字段是一个复选框,在任何给定时间点只能选中一个复选框(模拟单选按钮)。因此,当单击一个复选框时,我需要根据所选的那个对formArray进行排序。

我知道文档建议不要弄乱formArray中存在的AbstractControls [],那么对数组进行动态排序的理想方法是什么?

我试图对数组进行切片,然后将控件设置回formArray中,但是我不断收到错误消息“ 必须为名称为'primaryIndi​​cator'的表单控件提供一个值。

const abstractControls = this.formArray.controls
          .slice()
          .sort((a, b) => {
            return (a as FormGroup).get('primaryIndicator').value ? -1 : (b as FormGroup).get('primaryIndicator').value ? 1 : 0;
          });
        this.formArray.setValue(abstractControls);
Run Code Online (Sandbox Code Playgroud)

如果这不是正确的方法,那么解决这种情况的最佳方法是什么?

Lor*_*fme 11

我不认为这将是最好的方法,但从 formarray 获取值,用它做任何你想做的事情并将它们修补回来。

var myArray = this.formArray.value;
//do sorting here with myArray.sort 
this.formArray.patchValue(myArray)
Run Code Online (Sandbox Code Playgroud)

不要更改 this.formArray 的长度和架构。Patchvalue 只能修补具有相同结构的值。

  • 我在我的项目中使用它......但是你是对的,在formarrays中排序应该是开箱即用的。你已经在github上提出问题了吗? (2认同)
  • 如果 FormArray 包含一个带有另一个 FormArray 的 FormGroup,则可能会很棘手。如果并非所有后代 FormArray 都相同,则修补程序将会失败。是的,您已经提到了这一点,但是对于更复杂的表单层次结构来说,不要忘记考虑子级(如果它们也可以很长),这一点很重要。 (2认同)