如何获取值已更改的输入字段名称[Angular 6]

Question

我尝试了响应式表单 valueChanges 但 valueChanges 方法不返回已更改的输入字段名称。

我认为代码是这样的。但我认为这不是聪明的方式。因为我必须比较每个输入字段。所以我需要更聪明的方法。

  // get init view data from local storage
  this.localstorageService.getPlaceDetail().subscribe(data => {
    this.initPlaceDetail = data;
    // watch changed value 
    this.editPlaceForm.valueChanges.subscribe(chengedVal => {

      if (chengedVal['ja_name'] !== this.initPlaceDetail.languages.ja.name.text) {
        this.changedJA = true;
      }
      if (chengedVal['ja_romaji'] !== this.initPlaceDetail.languages.ja.name.romaji) {
        this.changedJA = true;
      }
      // ...... I have to check all input fields??
    });
  });

Answer 1

我正在从数组中添加表单控件，这样的东西对我有用。只需引用您需要的项目，而不是期望可观察到的 valueChanges 将其传递给您。

myFields.forEach(item => {
    const field = new FormControl("");
    field.setValue(item.value);
    field.valueChanges.subscribe(v => {
          console.log(item.name + " is now " + v);
    });
});

Answer 2

这是我在表单中获得更改控制的方式。

我为关心的人分享。

获取列表控件更改值的方法

private getChangedProperties(form): any[] {

    let changedProperties = [];

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

      if (currentControl.dirty)
        changedProperties.push({ name: name, value: currentControl.value });
    });

    return changedProperties;
  }

如果您只想获得最新更改的控件，您可以使用

var changedProps = this.getChangedProperties(this.ngForm.form);

var latestChanged = changedProps.reduce((acc, item) => {
if (this.changedProps.find(c => c.name == item.name && c.value == item.value) == undefined) {
       acc.push(item);
  }
  return acc;
}, []);

Answer 3

您可以监听每个表单控件的值更改事件，而不是监听整个表单更改，如下代码所示：

this.myForm.get('ja_name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;
  });