Question

我无法找到如何使用angular2表单检索用户修改的所有字段。我在这里和angular2官方表单文档做了一些研究，我找不到这样的信息。

这就是我使用jQuery的方式：

    this.isFormDirty = function (form) {
        var changeNames = [];

        $(form).find(":input:not(:button):not([type=hidden])").each(function () {
            if ((this.type == "text" || this.type == "textarea" || this.type == "number" || this.type == "hidden" || this.type == "file") && this.defaultValue != this.value) {
                changeNames.push(this.name);
            } else {
                if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                    changeNames.push(this.name);
                } else {
                    if ((this.type == "select-one" || this.type == "select-multiple")) {
                        for (var x = 0; x < this.length; x++) {
                            if (this.options[x].selected != this.options[x].defaultSelected) {
                                changeNames.push(this.name);
                            }
                        }
                    }
                }
            }
        });

        return changeNames;
    };

有没有办法使用angular2表单？我以为我会有某种changeValues属性，但我找不到它。

修改

这是我的表单创建方式：（permissionForm类型为FormGroup）

this.permissionForm = this.fb.group({
      FullUrl: ['', Validators.required],
      Area: ['', Validators.required],
      Controller: ['', Validators.required],
      Action: ['', Validators.required],
      Name: ['', Validators.required],
      Description: ['', Validators.required],
      ParentPermissionId: ['', Validators.required],
      ShowInMenu: ['', Validators.required],
      Order: ['', Validators.required],
      Icon: ['', Validators.required]
    });

Answer 1

嗯，这就是我现在的目标：

private getChangedProperties(): string[] {
  let changedProperties = [];

  Object.keys(this.permissionForm.controls).forEach((name) => {
    let currentControl = this.permissionForm.controls[name];

    if (currentControl.dirty)
      changedProperties.push(name);
  });

  return changedProperties;
}

我真的希望angular2表单具有该信息的简单属性。如果有更好的方法，请发布另一个答案。

Answer 2

您可以使用Observables实现此目的：

Observable.from(Object.values(this.permissionForm.controls))
  .filter(control => control.dirty)
  .subscribe(control => {
    // Here doing stuff with all your dirty control
  })

您还可以订阅控件更改：

this.permissionForm
  .valueChanges
  .subscribe(control => {
    // Here doing stuff with your control
    // like checking if control is dirty and append it to an array
  });

Answer 3

您可以使用此帮助程序方法获取表单的脏状态：

function getDirtyState(form: FormGroup): Object {
  return Object.keys(form.controls).reduce<Object>((dirtyState, controlKey) => {
    const control = form.controls[controlKey];

    if (!control.dirty) {
      return dirtyState;
    }

    if (control instanceof FormGroup) {
      return {
        ...dirtyState,
        [controlKey]: getDirtyState(control),
      };
    }

    return {
      ...dirtyState,
      [controlKey]: control.value,
    };
  }, {});
}

它还处理嵌套的formGroup控件，并返回一个与整个表单结构相同的值对象。

Answer 4

const keyValue = Object.entries(this.form.controls).filter(value => value[1].dirty);

对于获取控件名称数组：

keyValue.map(value => value[0]);

对于获取控件数组：

keyValue.map(value => value[1]);

对于获取控件对象：

keyValue.reduce((a, v) => Object.assign(a, { [v[0]]: v[1] }), {});

Сmpact函数：

type GetDirtyControlsTypes = 'object' | 'array' | 'names';

export function getDirtyControls(form: FormGroup, type: GetDirtyControlsTypes = 'object') {
  // keyValue
  const kv = Object.entries(form.controls).filter(val => val[1].dirty);
  return {
    object: () => kv.reduce((accum, val) => Object.assign(accum, { [val[0]]: val[1] }), {}),
    array: () => kv.map(val => val[1]),
    names: () => kv.map(val => val[0]),
  }[type]();
}

如何使用angular2表单获取所有“脏”（修改）字段？

4 个答案: