修补 FormGroup 时如何让 Angular Reactive Forms PatchValue() 忽略空值或未定义

Question

对于我正在构建的应用程序，我从 API 检索数据并直接使用该响应设置我的表单值。 为此，我正在使用反应式表单模块。 我已经构建了表单，使其与我从 API 获取的对象相匹配。 问题是某些字段应该是一个对象 (FormGroup)，但在为空时为 NULL。 这会导致错误“无法将 undefined 或 null 转换为对象”。

表单组实例：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
});

来自 API 的响应

note: NULL

我的想法是，也许可以在定义 FormGroup 的地方放置 OR 语句或其他内容，如下所示：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
} | NULL);

Answer 1

在使用之前，您可以尝试使用 lodash pickBy 方法来包装您的 api 响应。

import * as _ from 'lodash';
...
//fetch data from API
note.patchValue(
    _.pickBy(apiResponse)
);
...

Answer 2

您可以像这样定义表单

note =new FormGroup({
   'turnbook_file': new FormControl(null),
   'note: new FormControl(null),
   'additional_files': new FormControl(null)
})

Answer 3

如果您定义表单和控件，那么您必须将值传递给它，因此如果您的响应为空，则像这样设置表单控件的值

note.setValue({
'turnbook_file': data.turnbook_file == null ? "": data.turnbook_file,
   'note: ,data.note == null ? "": data.note,
   'additional_files': data.additional_files == null ? "": 
    data.additional_files,
})

Answer 4

您可以在修补表单之前简单地过滤掉这些值

const obj = {
  foo: "bar",
  bar: null,
  cat: undefined,
  dog: "bark"
}

const truthy = Object.keys(obj).filter(item => obj[item] != undefined || obj[item] != null );
const newObj = {};
truthy.forEach(item =>Object.assign(newObj, { [item]: obj[item]}));
console.log(newObj) // { foo: "bar", dog: "bark" }

过滤掉虚假值后，只需使用它来修补表单

Answer 5

想到了两个解决方案

修改 FormGroup 原型

@NgModule({...})
export class AppModule {

  constructor() {
    const builtInFunction = FormGroup.prototype.patchValue;
    FormGroup.prototype.patchValue = function (value, options?) {
      builtInFunction.call(this, value || {}, options);
    }
  }

}

扩展 FormGroup 类

import {FormGroup, ValidatorFn, AbstractControlOptions, AsyncValidatorFn} from '@angular/forms';

export class MyFormGroup extends FormGroup {

  constructor(
    controls: {[key: string]: any},
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
  ) {
    super(controls, validatorOrOpts, asyncValidator);  
  }

  patchValue(value: {[key: string]: any}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}) {
    super.patchValue(value || {}, options);
  }

}

Answer 6

简短回答：在 Angular Forms API 的当前实现中 - 无法使用null或undefined值创建/修补FormGroup 。

原因：在所有场景new FormGroup(), formBuilder.group(), patchValue()等中，都会调用Object.keys()方法，该方法会抛出错误Cannot convert undefined or null to object （根据 JS 规范）如果我们将null/undefined作为参数传递。

证明：

• FormBuilder的group()方法（ 源代码链接）：

   group(controlsConfig: {[key: string]: any}, ...) { const controls = this._reduceControls(controlsConfig); ... } _reduceControls(controlsConfig: {[k: string]: any}) { Object.keys(controlsConfig).forEach(...); ... }

• FormGroup的patchValue （ 源代码链接）：

   patchValue(value: {[key: string]: any}, ...) { Object.keys(value).forEach(...); ... }

解决方法：

• 在后端更改您的 API 响应，以便它发送空对象{}而不是 null；
• 在前端收到响应后，您可以进行映射：从空到{}；
• 扩展FormGroup类并创建一个新的类，您可以在其中覆盖constructor/patchValue ：检查参数是否为null/undefined - 改用空对象。
• 扩展FormBuilder服务并创建您自己的 Singleton 服务（在您的应用程序中的任何地方使用它），您可以在其中覆盖group方法（请参阅上一点）。

Answer 7

改进 bestbrain10 答案。 您可以同时使用 pickBy 和 isDefined。

import { isEmpty, pickBy ,isUndefined,isNull} from 'lodash';
// Fetch data and remove all falsy  keys

this.formgroup.patchValue(
_.omitBy(formData, (v) => _.isUndefined(v) || _.isNull(v) || v === ''));