When is Angular's FormArray a traditional array and when is it a FormArray object?

Question

I've built a custom input component with ControlValueAccessor and it works great to add tags as selections. (Stackblitz)

My problem is:

when I implement the component within a form (cities & states controls)
add values to both controls by selecting some options
submit the form
sometimes the control value is an array of selected tags (as expected)
other times it's an actual FormArray object

Here is a screenshot of two of the same component's values after submitting the angular form. One is an array of objects (expected) the other is an actual FormArray object which .value property contains the array of objects!

Here is some code of how it works in case you don't want to visit StackBlitz.

The custom control is implemented like this.

this.form = this.fb.group({
  tags: this.fb.array([])
});

When the user selects a dropdown item or hits enter the object is saved like this:

get tagsArray(): FormArray { return this.form.get('tags') as FormArray; }
...
this.tagsArray.push(new FormControl(value));
this.onChange(this.tagsArray); // update controller value

You could replicate this by implementing the component in my StackBlitz in a formGroup just like this (also in my StackBlitz):

Form Init

public form: FormGroup = this.fb.group({
    states: [],
    cities: []
});

Template

<input-tags formControlName="cities" label="Cities" [typeAhead]="cities" [displayKeys]="['name']" filterKeys="['name']"></input-tags>
<input-tags formControlName="states" label="States" [typeAhead]="states" [displayKeys]="['name']" filterKeys="['name']"></input-tags>

but the question is:

When is Angular's FormArray a traditional array and when is it a FormArray Array like object?

Sergey · Accepted Answer · 2019-06-16 07:35:01Z

3

+50

FormArray object is being created when you create a control instance using new FormArray([]) or formBuilder.array([]).

However, if you apply a FormControl instance to class with ControlValueAccessor methods it will write either FormControl or FormGroup (if you want to work with provided by Angular form objects) to the value of control you have passed.

Thus, in first case you get a FormArray object and in second case you can get either regular JS types (object, array, string etc.) or FormGroup/FormControl.

If you want more expanded answer specific to your case the code sample is required because your implementation may cause transforming array to FormArray at some point.

Update #1

If we change a valueChanges from users to form we can see that this form is kind of broken, because .value gives us another FormArray instead of just Array.

Also, I've checked the implementation and there is nowhere you can get regular array in there. However, custom control is implemented wrong IMHO, since you should the value on .value instead of FormArray or whatever similar to this.

Therefore, if you can change the implementation of this control I would suggest you do that. I do it in way of

registerOnChange(fn: any): void {
  this.tagsArray.valueChanges.subscribe(fn);
}

edited Jun 16, 2019 at 7:35

answered Jun 15, 2019 at 14:20

Sergey

7,69214 gold badges49 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ben Racicot Over a year ago

Thanks @Sergey, this is insightful. But this control is implemented exactly the same way twice in the same form and they each sometimes have [] value and sometimes have FormArray{} value, as the value screenshot shows.

Sergey Over a year ago

@BenRacicot in that case I would advise you to inspect your code using IDE debugging tool to see where your value transforms. Just make breakpoints everywhere the value is being assigned to control and you should find it.

Ben Racicot Over a year ago

Yes, initial value is an array, patch values are arrays but selecting an option creates FormArray value. Any values added go through the same addTag method. That's why this doesn't make sense. Can you explain more about the registerOnChange refactor you recommend? Thanks for this BTW.

Sergey Over a year ago

@BenRacicot that's just a basic method of ControlValueAccessor which is used to define the function which should get the values to assign them to the main form. More about it you can read here angular.io/api/forms/ControlValueAccessor

Sergey Over a year ago

@BenRacicot personally I see no point in pushing FormArray objects into your main form as it kind of breaks the logic and causing some problems. When I implement these ControlValueAccessor I work only with simple values (meaning not AbstractControl descendants) and everything works pretty fine.

|

Collectives™ on Stack Overflow

When is Angular's FormArray a traditional array and when is it a FormArray object?

1 Answer 1

Update #1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update #1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related