Angular FormArray 内容顺序 [英] Angular FormArray contents order
问题描述
嘿，
我有以下设置:
App.Component.Ts 内容
carForm: FormGroup;构造函数(私人 fb:FormBuilder){this.carForm= this.fb.group({姓名: ''，类型: ''，附加:this.fb.array([])});}获取 carExtras(): FormArray {将 this.carForm.get('extras') 作为 FormArray 返回；}addNewExtra() {this.carExtras.push(this.fb.group(new Extra());}额外模型
export class Extra {名称:字符串 = '';描述:字符串 = '';}现在假设我添加了 4 个新的 Extras，数组将如下所示:
<代码>1.name = "Phantom Wheels", description = "大黑轮因为司机过度补偿"2. name = "Clearshield", description = "我们向客户多收的简单色调"3. name = "Rainbow Paint Job", description = "剩余的随机油漆混合并扔到车上"4. name = "Slick Rims", description = "Major overcompensation"
我希望能够以编程方式更改列出的 4 个项目的顺序.假设我单击Slick Rims"旁边的向上按钮，它将与Rainbow Paint Job"项目交换位置.如果我再次按下它，它将与Clearshield"交换位置，结果如下.
<代码>1.name = "Phantom Wheels", description = "大黑轮因为司机过度补偿"2. name = "Slick Rims", description = "Major overcompensation"3. name = "Clearshield", description = "我们向客户多收的简单色调"4. name = "Rainbow Paint Job", description = "剩余的随机油漆混合并扔到车上"
同样的原理，如果我按下输入按钮.
关于如何实现这一点的任何想法，我都在思考如何使用 FormArray 实现这一点.
假设您的表单数组在 HTML 中如下所示:
附加功能:<div *ngFor="let extra of carForm.get('extras').controls; let i=index" [formGroupName]="i" ><input formControlName="name"><input formControlName="description"><按钮(点击)="moveUp(i)">向上 </button><按钮(点击)="moveDown(i)">向下 </按钮>如果可能，您可以创建 moveUp 和 moveDown 函数来交换索引 (i-1, i) 或 (i, i+1) 处的值
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);}}将使用适当的索引调用
演示: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 contents
carForm: 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 Model
export 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-bhcdcf
EDIT: 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-9gifvd
EDIT 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 内容顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
