如何使用angular2表单获取所有"脏"(修改)字段？

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

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] }), {});

? 冲击功能：

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]();
}