Javascript 使用AngularJS（1.6）双向绑定到输入组件

我有一个父组件从服务器接收数据，并且必须创建一个特定的（和不同的）对象，该对象将在信息更新时发送到服务器。 父控制器：

function ParentController() {
  this.$onInit = () => {
  // get user data from server
    this.userDataObject = {
      userInformation: {
        firstName: response.data.firstName,
        lastName: response.data.lasName,
      },
      contactInformation: {
        email: response.data.email,
        phone: response.data.phone
      }
    }
  }
    this.saveToDB = () => {
        httpPostCall(this.userDataObject);
    }
}

数据的每个属性都传递给一个子组件，该子组件本质上是一个输入元素（具有复杂的显示逻辑，因此分为不同的组件）。 父模板：

<parent-component>
    <child-component save-value="$ctrl.saveToDB()"
        field-value="$ctrl.userDataObject.userInformation.firstName">
    </child-component>
</parent-component>

然后子节点通过NgModel将字段值绑定到输入值（如果字段值为空，则使用占位符文本）。绑定到模型的值工作正常，因此当用户提供输入时，父组件数据会发生更改：

<div>
    <input ng-model="$ctrl.fieldValue">
    <button ng-click="$ctrl.saveValue()">OK</button>
</div>

好啊

这是因为对输入的更改会更改

buyerDataObject

，然后在保存时更新数据库

但是，如果未更改

字段值

，它也可以工作，因此如果用户单击按钮而不更改值，它仍将保存到数据库中。我想找到一种方法来确定值是否已更改

---

我已尝试将

fieldValue

的值保存到

$onInit

子组件中的局部变量，但它返回未定义的值。我可以观察变量并保存初始值，但宁愿避免在混合中添加观察者。感觉应该有一种更直接的方法来解决这个问题。

如果您将输入字段包装在表单标签中并将其链接到控制器

<form name="$ctrl.anyFormName">
    <input ng-model="$ctrl.fieldValue">
    <button ng-click="$ctrl.saveValue()">OK</button>
</div>

或者您可以禁用保存按钮，直到表单被弄脏

<button ng-click="$ctrl.saveValue()"
        ng-disabled="$ctrl.anyFormName.$pristine">
OK
</button>

好啊

您可以在此处找到所有角度形状属性：

---

在用数据填充表单后，您还可以使用这些方法将表单设置为原始状态。

您可以使用输入字段设置表单，并使用输入的属性（如原始、脏和触摸）检查值并确定天气值是否已更改

    this.saveToDB = () => {
        if($ctrl.anyFormName.$dirty) {
            httpPostCall(this.userDataObject);
        }
    }

<button ng-click="$ctrl.saveValue()"
        ng-disabled="$ctrl.anyFormName.$pristine">
OK
</button>