嗨,
我有以下设置:
App.Component.Ts 内容
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());
}
额外型号
export class Extra {
name: string = '';
description: string = '';
}
现在假设我添加了 4 个新的 Extras,数组将如下所示:
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"
我希望能够以编程方式更改列出的 4 个项目的顺序。
假设我单击“Slick Rims”旁边的向上按钮,它将与“Rainbow Paint Job”项目交换位置。如果我再次按下它,它将与“Clearshield”交换位置,结果如下。
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"
如果我按下输入的向下按钮,原理相同。
任何想法如何实现这一点,我都在思考如何使用 FormArray 实现这一点。
请您参考如下方法:
假设您的表单数组在 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>
您可以创建
moveUp
和
moveDown
如果可能,函数在索引 (i-1, i) 或 (i, i+1) 处交换值
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(arr: any[], index1: number, index2: number): any[] {
arr = [...arr];
const temp = arr[index1];
arr[index1] = arr[index2];
arr[index2] = temp;
return arr;
}
演示: https://stackblitz.com/edit/angular-bhcdcf
编辑:实际上我们可以将其简化为单个功能
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);
}
}
将使用适当的索引调用
<button (click)="swap(i - 1, i)"> UP </button>
<button (click)="swap(i, i + 1)"> DOWN </button>
演示: https://stackblitz.com/edit/angular-9gifvd
Aeseir 编辑 2:
进一步简化并遵循 DRY 原则(至少尝试):
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);
}