如何在Angular FormGroup中重新调整控件的顺序？

首先得修正你代码里的小问题：initChildGroup函数漏了return formGroup，不然descriptions会是undefined，先补上这个。

要把de置于首位，分两种场景处理：

场景1：初始化时就确定顺序 #

直接调整langs数组的顺序为['de', 'en']，然后正常初始化FormGroup就行——因为initChildGroup是按langs的遍历顺序添加控件的，新顺序会直接反映到descriptions的控件顺序里，同时languages表单控件的值也会同步更新：

const langs = ['de', 'en'];
form = new FormGroup({
  languages: [langs, [Validators.required]],
  descriptions: initChildGroup(langs)
});

initChildGroup(langs: string[]) {
  const formGroup: FormGroup = new FormGroup({});
  langs.forEach((lang) => {
    formGroup.addControl(lang, new FormControl());
  });
  return formGroup; // 补上返回语句
}

场景2：已创建FormGroup后动态调整顺序 #

如果已经初始化了FormGroup，不想重新创建，可以手动重构descriptions的控件顺序：

1. 先定义新的语言顺序['de', 'en']
2. 保存现有控件的值，避免丢失数据
3. 清空原descriptions的控件，按新顺序重新添加并赋值
4. 更新languages表单控件的值

代码示例：

// 定义新的语言顺序
const newLangOrder = ['de', 'en'];
// 获取descriptions表单组
const descriptionsForm = form.get('descriptions') as FormGroup;

// 保存现有控件的数值
const controlValues = newLangOrder.reduce((values, lang) => {
  values[lang] = descriptionsForm.get(lang)?.value;
  return values;
}, {} as Record<string, any>);

// 清空原有控件，按新顺序重新添加
descriptionsForm.clear();
newLangOrder.forEach(lang => {
  descriptionsForm.addControl(lang, new FormControl(controlValues[lang]));
});

// 更新languages控件的值
form.get('languages')?.setValue(newLangOrder);

原理很简单：Angular的FormGroup控件顺序是由addControl的调用顺序决定的，只要按你想要的顺序添加控件，后续模板渲染（比如遍历控件）就会遵循这个顺序。

内容的提问来源于stack exchange，提问作者Raphaël Balet