FormGroup.patchValue should ignore null arrays

[ShiftySituation]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Calling formGroup.patchValue(someObject) when someObject has a null array value, patchValue is still trying to iterate the null value.

Expected behavior

Should check for null before trying to run the iterative process.
The current implementation that allows null values in the array (ie; [null, 1234, null, 4433]) is not similar to this issue where the array value itself is null.

Minimal reproduction of the problem with instructions

check the constructor of add.component.ts
https://stackblitz.com/edit/angular-hewynt

What is the motivation / use case for changing the behavior?

So the back-end response isn't forced to send an empty array.

Environment

Angular CLI: 1.5.5
Node: 8.2.1
OS: win32 x64
Angular: 5.0.5

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[khylias]

Hi, I've got the same here. Have you a workaround for waiting a patch ?

[ShiftySituation]

I check the data for known arrays on the response. If null, set it to []. No real work-around.

[nirajkrz]

is there any update on this?

[Eivyses]

I'm waiting for update too

[SchneiterT]

The same issue happens when patching a formGroup with a null value

[rodolfojnn]

While this is not solved, I am setting it as follows:

this.frmMain.patchValue({
    ...data,
    someProperty: data.someProperty || {}
});

[leoderigo]

This issue was solved?

[wottpal]

This is such an obvious thing to fix. It's really annoying :(

[eduardosivd]

Is this on roadmap or what alternative route should we use?

[HitkoDev]

A "dirty fix" in case you really need this:

⚠ This may break some stuff, use at own risk!

import { NgModule } from '@angular/core'
import { FormArray, FormGroup, FormsModule } from '@angular/forms'

FormGroup.prototype.patchValue = function (value: { [key: string]: any }, options: { onlySelf?: boolean, emitEvent?: boolean } = {}): void {
    let keys: string[]
    try {
        keys = Object.keys(value)
    } catch (_e) {
        keys = []
    }
    keys.forEach(name => {
        if (this.controls[name]) {
            this.controls[name].patchValue(value[name], { onlySelf: true, emitEvent: options.emitEvent })
        }
    })
    this.updateValueAndValidity(options)
}

FormArray.prototype.patchValue = function (value: any[], options: { onlySelf?: boolean, emitEvent?: boolean } = {}): void {
    value?.forEach?.((newValue: any, index: number) => {
        if (typeof index === 'number' && this.at(index)) {
            this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent })
        }
    })
    this.updateValueAndValidity(options)
}

@NgModule({
    imports: [
        FormsModule
    ],
    exports: [
        FormsModule
    ]
})
export class FormsModuleFix { }

[SunilManthenaG01]

Do we have this on the roadmap yet?

[mistic100]

Here is a replacement to "patchValue" which call "reset" on groups and array when a null value is provided

safePatchValue(form: FormGroup | FormArray, value: any, options: any = {}) {
    Object.keys(value).forEach(name => {
        if (form.controls[name]) {
            if ((form.controls[name] instanceof FormGroup || form.controls[name] instanceof FormArray)) {
                if (isNil(value[name])) {
                    form.controls[name].reset();
                } else {
                    this.safePatchValue(form.controls[name], value[name], { onlySelf: true, emitEvent: options.emitEvent });
                }
            } else {
                form.controls[name].patchValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
            }
        }
    });
    form.updateValueAndValidity(options);
}

[AndrewKushnir]

Related issue: #36672, also another potentially related issue: #12219.

[angular-automatic-lock-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.}