CODEWITHSUNDEEP
angulardevextremedevextreme-angular
john_h
john_h

Reputation: 149

Reference variables undefined when used on devextreme form

On a devextreme form, you'll see the added reference variables "#email", "#twitter", and "#phone". I'm trying to pass the value of each input to a function, but these are returning an undefined object.

    <div class="jumbotron">

    <h1>:(</h1>
    <h2>
    Sorry, this feature is not yet implemented. Please subscribe and we will let you know when the feature is complete.
    </h2>
</div>

<div>
    <dx-form [colCount]="1"
             labelLocation="left">
        <dxi-item #email dataField="Email Address"></dxi-item>
        <dxi-item #twitter dataField="Twitter"></dxi-item>
        <dxi-item #phone dataField="Phone Number"></dxi-item>

    </dx-form>        

    <div class="buttonContainer">
        <dx-button text="Subscribe"
                   type="success"
                   icon="check"
                   (click)="onSubscribe(email.value, twitter.value, phone.value)">
        </dx-button>
    </div>

</div>

If I use a regular input element, the values are indeed passed as expected to the function: 

<input #email placeholder="email">
<input #twitter placeholder="twitter">
<input #phone placeholder="phone number">

The function simply is returning a console message: 

onSubscribe(emailAddress: string, twitterHandle: string, phoneNumber: string) {    
    console.log(emailAddress, twitterHandle, phoneNumber);      
}

How can I use these variable references to pass the input values to the function?

Upvotes: 0

Views: 1196

Answers (1)

Dmitry Levkovsky
Dmitry Levkovsky

Reputation: 180

dxi-item didn't have the value property. You can define a template which contains an editor with a reference like below:

<dxi-item>
    <dxo-label text="e-mail"></dxo-label>
    <dx-text-box #email [(value)]="data.email"></dx-text-box>
</dxi-item>
...
{{email.value}}

Upvotes: 1

Related Questions