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

Question

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

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

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

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 表单的新变化，我对已接受的答案进行了轻微修改，因此它可以正常工作。如果有人感兴趣，决定分享。（使用 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-like 结构中为您提供更改值的版本。这意味着返回的脏值将与脏控件处于同一级别。

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 仅获取控制组中的脏值

Angular 2 getting only the dirty values in a controlgroup

angular2-forms

angular