How to access a form inside a material step template in AngularDart?

Question

I am trying to combine a material-stepper with a form in AngularDart. The continue button from the material-stepper should be disabled as long as some required inputs are missing from the form. When the form is completed, the continue button should trigger a submit on the form.

However, as the step is a template, it creates its own scope and the reference to form cannot be used outside this scope. Therefore, the following code will not compile with error 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>

Is there another way to access the form or another solution to accomplish the same behavior?

"is a template, it creates its own scope" - but `{{form.valid}}` is part of the same template. It's a while I worked with Angular but this sounds weird. — Günter Zöchbauer, Sep 11 '18 at 09:13
The `{{form.valid}}` is indeed in the same scope, that is not the problem and behaves as expected, but the `[canContinue]="form.valid"` on the template tag has a different scope. — Rik Bellens, Sep 11 '18 at 13:04
I see. I'd use a shared service that you provide in the component that contains above markup and add a component or directive to the ` — Günter Zöchbauer, Sep 11 '18 at 13:17

score 1 · Answer 1 · answered Sep 14 '18 at 20:31

The way that templates work is that the components aren't instantiated until they are needed. In this case you are asking for the state of a form before the form is added to the component tree.

In terms of what you could do I suggest following Gunter's answer in the comments:

I'd use a shared service that you provide in the component that contains above markup and add a component or directive to the that injects that service and communicates from the template with the parent using that service. The parent that provides the service needs also to inject it so that both communication ends have a reference to the same service instance. The service can use a stream to allow one (or both) party to emit events and the other to subscribe to them.

Don't think that is the problem. I haven't found a way to access the form from within the component after everything has been rendered either, unless I am missing something. Gunter's suggestion works, but maybe is not the most elegant solution for all cases (you need quite some extra code). On the other hand it fits nicely with a BLoC architecture. — Rik Bellens, Sep 17 '18 at 08:18

How to access a form inside a material step template in AngularDart?

1 Answers1