如何在AngularDart中访问材质步骤模板中的表单？

Question

我试图将一个material-stepper与AngularDart中的表单结合起来。只要表单中缺少某些必需的输入，就应禁用material-stepper中的continue按钮。表单完成后，继续按钮应触发表单上的提交。

但是，由于步骤是模板，因此它会创建自己的范围，并且不能在此范围之外使用对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>

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

Answer 1

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

就你能做什么而言，我建议在评论中跟随Gunter的回答：

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