Как получить доступ к форме внутри шаблона шага материала в AngularDart?

Question

Я пытаюсь объединить material-stepper с формой в AngularDart. Кнопка продолжения на шаге материала должна быть отключена, если в форме отсутствуют некоторые необходимые входные данные. Когда форма заполнена, кнопка продолжения должна вызвать отправку в форме.

Однако, поскольку шаг является шаблоном, он создает свою собственную область, и ссылка на 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

Способ работы шаблонов заключается в том, что компоненты не создаются, пока они не понадобятся. В этом случае вы запрашиваете состояние формы перед ее добавлением в дерево компонентов.

Что касается того, что вы могли бы сделать, я предлагаю после ответа Гюнтера в комментариях:

Я бы использовал общую службу, которую вы предоставляете в компоненте, который содержит указанную выше разметку и добавляет компонент или директиву в который внедряет эту услугу и связывается с шаблон с родителем, использующим этот сервис. Родитель, который обеспечивает сервис также должен внедрить его так, чтобы оба конца связи иметь ссылку на тот же экземпляр службы. Служба может использовать поток, чтобы позволить одной (или обеим) сторонам отправлять события, а другой подписаться на них.