Add replaceControls method to FormArray class

🚀 feature request

Relevant Package

This feature request is for the FormArray class in @angular/form.,

Description

Currently if i use a FormArray in a custom ControlValueAccessor i have to manually remove/add controls based on the writeValues input.

Here is an example:

import { Component, forwardRef, OnDestroy } from '@angular/core';
import { ControlValueAccessor, FormArray, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Observable, ReplaySubject, Subscription } from 'rxjs';
import { filter, map, takeUntil } from 'rxjs/operators';

@Component({
    template: `custom-value-accessor-template`,
    selector: 'my-custom-value-accessor',
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => MyCustomControlValueAccessor),
        multi: true
    }]
})
export class MyCustomControlValueAccessor<TValue extends unknown = unknown> implements ControlValueAccessor,
    OnDestroy {

    protected readonly control = new FormArray([]);
    protected readonly userValueChanges$: Observable<TValue[]>;
    protected readonly destroyed = new ReplaySubject<void>(1);

    private changesSubscription: Subscription | undefined;
    private pauseChanges = false;
    private _changeFn: (change: TValue[]) => void;
    private _touchedFn: () => void;

    constructor() {
        this.userValueChanges$ = this.control.valueChanges.pipe(
            filter(() => !this.pauseChanges),
            map(() => this.control.getRawValue())
        );
    }

    public writeValue(value: TValue[]): void {
        this.pauseChanges = true;

        while (this.control.length > 0) {
            this.control.removeAt(0);
        }

        value.forEach(item => {
            this.control.push(new FormControl(item));
        });

        this.pauseChanges = false;
    }

    public ngOnDestroy(): void {
        this.destroyed.next();
        this.destroyed.complete();
    }

    public registerOnChange(fn: (change: TValue[]) => void): void {
        this._changeFn = fn;

        if (!this.changesSubscription) {
            this.userValueChanges$.pipe(
                takeUntil(this.destroyed)
            ).subscribe(
                val => this.change(val)
            );
        }
    }

    public registerOnTouched(fn: any): void {
        this.touched = fn;
    }

    public change(value: TValue[]): void {
        if (this._changeFn) this._changeFn(value);
    }

    public touched(): void {
        if (this._touchedFn) this._touchedFn();
    }
}

Describe the solution you’d like

It would be nice if the FormArray would implement a replaceControls method:

    /**
     * Replace the current controls with new ones.
     *
     * @usageNotes
     * ### Replace controls of a FormArray
     *
     * ```typescript
     * const arr = new FormArray([
     *   new FormControl(0),
     *   new FormControl(1),
     *   new FormControl(2)
     * ]);
     *
     * console.log(arr.value);   // [1, 2, 0]
     *
     * arr.replaceControls([new FormControl(2)]);
     *
     * console.log(arr.value);   // [2]
     * ```
     *
     * @param controls The new controls which will replace the old ones
     */
    public replaceControls(controls: AbstractControl[]): void {
        if(this.controls.length) {
            this.controls.forEach(control => (control as any)._registerOnCollectionChange(() => undefined));
            this.controls.splice(0);
        }

        controls.forEach(control => {
            this.controls.push(control);
            (this as any)._registerControl(control);
        });

        this.updateValueAndValidity();
        (this as any)._onCollectionChange();
    }

[epiphanizer]

Glad I’m not the only one wanting this. ha!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}