Question

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

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中子组件中的局部变量，但它返回undefined。我可以观察变量并保存初始值，但宁愿避免添加观察者。感觉应该有一种更简单的方法来解决这个问题。

Answer 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

您也可以使用这些方法在将数据填入数据后将其设置为pristine。

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

1 个答案: