观察Angular中提交按钮被按下时的数值变化。

Question

我有一个编辑表单，如下图所示，它在输入字段中包含数据。

<ng-form #infoForm="ngForm" novalidate>
            <div>
                <label for="firstName">First Name :</label>
                <input type="text"
                       class="form-control"
                       id="firstName"
                       name="firstName"
                       [(ngModel)]="in.firstName">
            </div>
            <div>
                <label for="lastName">Last Name :</label>
                <input type="text"
                       autocomplete="on"
                       class="form-control"
                       id="lastName"
                       name="lastName"
                       [(ngModel)]="in.lastName">
            </div>
<button type="button" class="btn btn-primary" (click)="updateInfo(infoForm.value)">Update
                </button>
    </ng-form>

我在组件中设置了如下的功能。

updateInfo(info: any) {
        console.log(info);
}

当点击更新按钮时，这个表单会返回表单中的所有值（到控制台），但我想只提交编辑过的值，而不是整个表单。我如何实现？

Answer 1

为此，你可以将表单的值传递给'updateInfo'函数，并在那里进行处理。如果用户改变了控件的值，它的状态就会从 "t touchedpristine "变成 "dirty"，我们可以根据这个来过滤控件。

更改html文件。

<button type="button" class="btn btn-primary" (click)="updateInfo(infoForm)">Update
        </button>

更改*.ts文件。

updateInfo(info: NgForm) {
    const changedValues = Object.keys(info.controls)
      .filter(key => info.controls[key].dirty === true)
      .map(key => {
        return { control: key, value: info.controls[key].value }
      });
    console.log(changedValues);
  }