Question

我在Angular.js中有一个父组件，它有一个子组件。孩子有一个表格，父母有一个按钮，根据孩子表格的有效性启用/禁用。

最好的方法是什么？

我已经有了一个可行的解决方案，但它涉及一个双向绑定变量，我想知道是否有一种更简单的方法使用单向变量。

在孩子中我有这个：

module.component("personEdit", {
    bindings: {
        personForm: "="
    },
    template: `<form name="$ctrl.personForm" ...>
                    <input name="phone" required />
               </form>`
});

在父母身上我有这个：

module.component("directoryEdit", {
    template: `<person-edit person-form="$ctrl.personForm"></person-edit>
               <button ng-disabled="$ctrl.personForm.$invalid">`
});

请注意，父级不会初始化$ctrl.personForm变量，它实际上会在子级中初始化（由Angular.js“神奇地”完成），并且由于两者而被传递回父级。方式约束。

是否可以避免将该变量传递给子项，而是使用$invalid之类的内容查询$ctrl.allForms['form-name'].$invalid字段？

Answer 1

你在子组件中这样做：

module.component("personEdit", {
    bindings: {
        onValidityChange: "&"
    },
    template: `<form name="$ctrl.personForm" ...>
                    <input name="phone" required />
               </form>`
});

...

$scope.$watch('$ctrl.personForm.$valid', function(value) {
  vm.onValidityChange({valid: value});
})

现在在父级中，您可以使用此回调：

<person-edit on-validity-change="$ctrl.onChildValidityChange(valid)"

... vm.onChildValidityChange = function（x）{ vm.childValid = x; }

P.S。看起来有点复杂，但在这种情况下，您的组件完全独立。

获取子表单。$父组件无效

1 个答案: