首先,需要明确要排序的是表单数组中的哪个控件属性。假设要按照姓名属性进行排序,可以先将表单数组的值按照姓名属性进行排序,然后再将表单数组中的控件按照排好序的值更新顺序即可。
具体实现如下:
import { FormArray, FormControl, FormGroup } from '@angular/forms';
formArray: FormArray = this.form.get('items') as FormArray;
sortByName(a: FormGroup, b: FormGroup) {
const nameA = a.get('name').value.toLowerCase();
const nameB = b.get('name').value.toLowerCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
}
this.formArray.controls.sort(this.sortByName);
const sortedFormGroups = this.formArray.controls.map(control => control.value);
this.formArray.clear();
for (const item of sortedFormGroups) {
this.formArray.push(new FormGroup({
name: new FormControl(item.name),
age: new FormControl(item.age)
}));
}
其中,sortedFormGroups
是经过排序后的表单数组值的数组,clear()
方法用于清空表单数组,然后遍历 sortedFormGroups
中的每个元素,将其按照顺序添加到表单数组中。
完整示例代码如下:
import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form-array-sort',
template: `