从 FormGroup 角度 6 中获取用户使用的值答案

【问题标题】：Get user used values out of FormGroup angular 6从 FormGroup 角度 6 中获取用户使用的值
【发布时间】：2018-08-30 11:01:56
【问题描述】：

我正在构建一个搜索面板并使用响应式表单。我在该表单中有 12 个字段（例如：拳头名、姓氏、地址......）。在表单组中，没有一个字段被分配为“必填”。用户可以输入任意数量的字段进行搜索。有什么方法可以用来查找用户输入了多少字段。假设用户只使用了 12 个字段中的 5 个进行搜索，我想返回 5 个。我对每个字段都使用了单一搜索；

if (this.searchPanelForm.get('event').value) {
  //increase the count
}

它工作正常。但我不认为这是解决问题的有效方法，并且每次添加或删除另一个字段时都必须更改代码。有人可以提出任何解决方案。

这就是我的表单组的样子：

public searchPanelForm: FormGroup;
constructor(
    private _fb: FormBuilder
) { }
ngOnInit() {
 this.searchPanelForm = this._fb.group({
  name: [''],
  name1: [''],
  name2: [''],
  name3: [''],
  name4: [''],
  name5: [''],
  name6: [''],
  name7: [''],
  name8: ['']
});
}

谢谢

【问题讨论】：

标签： angular6 form-control

【解决方案1】：

当您提交表单时，您克隆表单值并将其存储在一个变量中，例如oldFormValue，然后当您需要了解随后输入了多少字段时，您可以比较以前的表单值和新的表单值，如下所示

getNumberOfFieldsChanged(newFormValue, oldFormValue) {
  return Object.keys(oldFormValue)
               .reduce((sum, nextKey) -> {
                 if (oldFormValue[nextKey] !== newFormValue[nextKey])
                   sum++;
                 return sum;
               }, 0);
}

您必须克隆表单值并将其分配给oldFormValue 变量，否则新值和旧值将引用同一个对象，这将导致上述方法始终返回0

【讨论】：