Angular FormArray 内容顺序

moveUp(index: number) {如果(索引> 0){const extrasFormArray = this.carForm.get('extras') as FormArray;const extras = extrasFormArray.value;const newExtras = this.swap(extras, index - 1, index);extrasFormArray.setValue(newExtras);}}向下移动(索引:数字){const extrasFormArray = this.carForm.get('extras') as FormArray;const extras = extrasFormArray.value;if (index < extras.length - 1) {const newExtras = this.swap(extras, index, index + 1);extrasFormArray.setValue(newExtras);}}交换函数: swap(arr: any[], index1: number, index2: number): any[] {arr = [...arr];const temp = arr[index1];arr[index1] = arr[index2];arr[index2] = 温度；返回 arr;}演示:https://stackblitz.com/edit/angular-bhcdcf实际上我们可以将其简化为单个函数 swap(index1: number, index2: number) {const extrasFormArray = this.carForm.get('extras') as FormArray;const extras = [...extrasFormArray.value];如果 (index2 > 0 && index1 < extras.length - 1) {[额外[索引1]，额外[索引2]] = [额外[索引2]，额外[索引1]]；extrasFormArray.setValue(extras);}}将使用适当的索引调用 向上 </button><button (click)="swap(i, i + 1)">向下 </按钮>演示:https://stackblitz.com/edit/angular-9gifvd由 Aeseir 编辑 2:进一步简化并遵循 DRY 原则(至少尝试这样做):get extras(): FormArray {将 this.carForm.get('extras') 作为 FormArray 返回；}向上移动(索引:数字){var extraTmp = this.extras.at(index);this.removeExtra(索引)；this.extras.insert(index-1, extraTmp);}向下移动(索引:数字){var extraTmp = this.extras.at(index-1);this.removeExtra(index-1);this.extras.insert(索引，extraTmp)；}removeExtra(索引:数字){this.extras.removeAt(index);}Hya,I have the below setup:App.Component.Ts contentscarForm: FormGroup;constructor( private fb: FormBuilder ) { this.carForm= this.fb.group({ name: '', type: '', extras: this.fb.array([]) }); }get carExtras(): FormArray { return this.carForm.get('extras') as FormArray; }addNewExtra() { this.carExtras.push(this.fb.group(new Extra());}Extra Modelexport class Extra {name: string = '';description: string = '';}Now lets say i add 4 new Extras, the array would look as follows:1. name = "Phantom Wheels", description = "Big dark wheels coz driver is overcompensating"2. name = "Clearshield", description = "Simple tint that we overcharge customers"3. name = "Rainbow Paint Job", description = "Leftover random paints mixed and thrown onto car"4. name = "Slick Rims", description = "Major overcompensation"I want to be able to programmatically change the order of the 4 items listed.Say i click up button next to "Slick Rims", it will swap positions with "Rainbow Paint Job" item. If i press it again it will swap positions with "Clearshield" with result as follows.1. name = "Phantom Wheels", description = "Big dark wheels coz driver is overcompensating"2. name = "Slick Rims", description = "Major overcompensation"3. name = "Clearshield", description = "Simple tint that we overcharge customers"4. name = "Rainbow Paint Job", description = "Leftover random paints mixed and thrown onto car"Same principle if i press the down button for the entry.Any ideas how to achieve this, its doing my head in on how to achieve this with a FormArray. 解决方案 Assuming your form array looks like this in HTML: <div formArrayName="extras"> extras: <div *ngFor="let extra of carForm.get('extras').controls; let i=index" [formGroupName]="i" > <input formControlName="name"> <input formControlName="description"> <button (click)="moveUp(i)"> UP </button> <button (click)="moveDown(i)"> DOWN </button> </div> </div>you can create moveUp and moveDown functions to swap values at indexes (i-1, i) or (i, i+1) if it is possible moveUp(index: number) { if (index > 0) { const extrasFormArray = this.carForm.get('extras') as FormArray; const extras = extrasFormArray.value; const newExtras = this.swap(extras, index - 1, index); extrasFormArray.setValue(newExtras); } } moveDown(index: number) { const extrasFormArray = this.carForm.get('extras') as FormArray; const extras = extrasFormArray.value; if (index < extras.length - 1) { const newExtras = this.swap(extras, index, index + 1); extrasFormArray.setValue(newExtras); } }swap function: swap(arr: any[], index1: number, index2: number): any[] { arr = [...arr]; const temp = arr[index1]; arr[index1] = arr[index2]; arr[index2] = temp; return arr; }demo: https://stackblitz.com/edit/angular-bhcdcfEDIT: Actually we can simplify that to single function swap(index1: number, index2: number) { const extrasFormArray = this.carForm.get('extras') as FormArray; const extras = [...extrasFormArray.value]; if (index2 > 0 && index1 < extras.length - 1) { [extras[index1], extras[index2]] = [extras[index2], extras[index1]]; extrasFormArray.setValue(extras); } }which would be called with appropriate indexes <button (click)="swap(i - 1, i)"> UP </button> <button (click)="swap(i, i + 1)"> DOWN </button>demo: https://stackblitz.com/edit/angular-9gifvdEDIT 2 by Aeseir:Further simplification and following DRY principle (at least attempting to):get extras(): FormArray { return this.carForm.get('extras') as FormArray;}moveUp(index: number) { var extraTmp = this.extras.at(index); this.removeExtra(index); this.extras.insert(index-1, extraTmp);}moveDown(index: number) { var extraTmp = this.extras.at(index-1); this.removeExtra(index-1); this.extras.insert(index, extraTmp);}removeExtra(index: number) { this.extras.removeAt(index);} 这篇关于Angular FormArray 内容顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！