Angular 2 仅获取控制组中的脏值答案

【问题标题】：Angular 2 getting only the dirty values in a controlgroupAngular 2 仅获取控制组中的脏值
【发布时间】：2016-09-17 11:14:32
【问题描述】：

我在 Angular 2 中有一个与自定义 ControlGroup 一起使用的表单。目前，当我提交表单时，我将以下行的所有数据传递给我的控制器。

(ngSubmit)="updateArtist(artistDetailForm.value)"

问题是它传递了表单的所有值，如果我的表单很大，这感觉很没用。是否有可能只传递修改后的（脏？）值？

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

声明你的表单。

this.artistDetailForm= formBuilder.group({......});

定义一个函数以在提交时提取值

// feed me controlGroups

getDirtyValues(cg) {
  let dirtyValues = {};  // initialize empty object
  Object.keys(cg.controls).forEach((c) => {

     let currentControl = cg.find(c);

     if(currentControl.dirty){
        if(currentControl.controls) //check for nested controlGroups
           dirtyValues[c] = getDirtyValues(currentControl);  //recursion for nested controlGroups
        else    
           dirtyValues[c] = currentControl.value;  //simple control
     }

    });
  return dirtyValues;
}

然后这样做

(ngSubmit)="updateArtist(getDirtyValues( artistDetailForm ))"

PLUNKER

【讨论】：

对于 Angular 6，如果出现错误，您可以使用 let currentControl = controlGroups.get(c); 替换 let currentControl = cg.find(c);。

【解决方案2】：

随着对 Angular 表单的新更改，我稍微修改了接受的答案，所以它可以工作。如果有人感兴趣，决定分享。（使用 Angular 4+）

getDirtyValues(form: any) {
        let dirtyValues = {};

        Object.keys(form.controls)
            .forEach(key => {
                const currentControl = form.controls[key];

                if (currentControl.dirty) {
                    if (currentControl.controls)
                        dirtyValues[key] = this.getDirtyValues(currentControl);
                    else
                        dirtyValues[key] = currentControl.value;
                }
            });

        return dirtyValues;
}

【讨论】：

【解决方案3】：

这是一个遍历任意 Form 结构并在嵌套的类似 Map 的结构中为您提供更改的值的版本。这意味着返回的脏值将与脏控件处于同一级别。

getDirtyValues(
  form: FormGroup | FormArray | FormControl | AbstractControl
): Map<string, any> | any[] | any | undefined {
  if (!form.dirty) {
    return;
  }

  if (form instanceof FormControl) {
    return form.value;
  }

  if (form instanceof FormGroup) {
    const result = new Map();
    for (const [key, control] of Object.entries(form.controls)) {
      const nestedResult = this.getDirtyValues(control);
      if (nestedResult) {
        result.set(key, this.getDirtyValues(control));
      }
    }

    return result;
  }

  if (form instanceof FormArray) {
    const result = new Array();
    form.controls.forEach(control => {
      const nestedResult = this.getDirtyValues(control);
      if (nestedResult) {
        result.push(nestedResult);
      }
    });

    return result;
  }

  throw new Error('Form must be a FromGroup, FormArray or FormControl.');
}

【讨论】：

谢谢。这更全面，因为它考虑了 FormArray。