使用AngularJS（1.6）双向绑定到输入组件[重复]答案

【问题标题】：Two-way binding to input component with AngularJS(1.6) [duplicate]使用AngularJS（1.6）双向绑定到输入组件[重复]
【发布时间】：2018-01-01 13:37:48
【问题描述】：

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

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>

孩子是一个输入字段，具有双向数据绑定到userDataObject上的相关属性：

bindings: {
    fieldValue: '=',
    saveValue: '&'
}

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

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

这是因为对输入的更改会更改buyerDataObject，然后在保存时更新数据库。

但是，如果没有对fieldValue 进行任何更改，它也可以工作，因此如果用户单击按钮而不更改值，它仍然会保存到数据库中。我想找到一种方法来确定值是否发生了变化。

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

【问题讨论】：

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

标签： javascript angularjs

【解决方案1】：

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

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

然后，您可以获得有关字段数据是否已在控制器中修改的有用信息。所以你可以改变你的保存方法看起来像

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

或者您可以在表单被弄脏之前禁用保存按钮。

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

您可以在此处找到所有角形属性：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

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

【讨论】：