CODEWITHSUNDEEP
scopedartangular-dartangular-material-stepper
Rik Bellens
Rik Bellens

Reputation: 1

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

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?

Upvotes: 0

Views: 121

Answers (1)

Ted Sander
Ted Sander

Reputation: 1899

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.

Upvotes: 1

Related Questions