0

我正在尝试将 amaterial-stepper与 AngularDart 中的表单结合起来。只要表单中缺少一些必需的输入，就应该禁用材料步进器的继续按钮。表单完成后，继续按钮应触发表单上的提交。

但是，由于 step 是一个模板，它会创建自己的范围，并且form不能在此范围之外使用对的引用。因此，以下代码将不会编译并出现错误The getter 'form' isn't defined for the class...。

<material-stepper>
    <template step
          name="Personal data"
          (continue)="form.submit()"
          [canContinue]="form.valid"
    >
        <form #form="ngForm">
            <material-input required
                            label="Name"
                            ngControl="name"
            ></material-input>
        </form>
        form complete: {{form.valid}}
    </template>
</material-stepper>

是否有其他方法可以访问表单或其他解决方案来完成相同的行为？

4

1 回答 1

1

模板的工作方式是组件在需要时才被实例化。在这种情况下，您在将表单添加到组件树之前询问表单的状态。

就您可以做什么而言，我建议您在评论中遵循 Gunter 的回答：

我将使用您在包含上述标记的组件中提供的共享服务，并将组件或指令添加到注入该服务并使用该服务从模板与父级通信的组件或指令。提供服务的父级也需要注入它，以便通信两端都有对同一个服务实例的引用。该服务可以使用流来允许一方（或双方）发出事件，而另一方订阅它们。

于 2018-09-14T20:31:21.423 回答