Question

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

function dumpData(data){

问题在于，它传递了一个表单的所有值，如果我的表单非常大，那么感觉就没用了。是否有可能只传递修改后的（脏？）值？

Answer 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

Answer 2

随着对Angular Forms的新更改，我稍微修改了已接受的答案，因此它可以正常工作。如果有人有兴趣，决定分享。（使用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;
}

Answer 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.');
}

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

3 个答案: