Angular2/4 How to automatically update formArray size according to inserted data?

user_1646729 0
Viewed 990

I have the following configuration for my form builder 

 this.fb.group({
            id: [this.app.get('id'), []],
            tips: new FormArray([new FormControl('')]),
 })

I would like to update the size of tips, depending on the data that I am inserting into it during setValue() or patchValue(). If I have the following data 

{
 id: 123,
 tips: [ 'Drink water', 'Exercise' ]
}

I would like the array to automatically expand. Does Angular have such a feature or do i have to check the size of the array and insert new controls into it ?

angular2-forms angular
2 Answers

I ran into a similar issue where I did not want to lose my Validators or valueChange observable.

The simplest solution is to:

  • Encapsulate your "tip" instantiation in a method to be reused
  • Use removeAt() and push() to match the incoming value's length
    setFormValue(newValues: TipList): void {
        const tipArray: FormArray = <FormArray>this.myForm.get('tips');

        // Remove controls in the list to match new value
        while (tipArray.length > newValues.tips.length) {
            tipArray.removeAt(0);
        }
        // Add controls in the list to match new value
        while (tipArray.length < newValues.tips.length) {
            tipArray.push(this.getNewTip());
        }

        // Finally set the incoming value
        this.myForm.setValue(newValues);
    }

    getNewTip(): FormControl {
        const tip: FormControl = new FormControl(''); // <- set validation here
        // Set other things like valueChange here
        return tip;
    }

You can see the working StackBlitz here

user_14739990
Related