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.