[SOLVED] data binding ngModel not working in angular 12

Issue

i tried inserting a data using angular 12 and firebase, i tried using data binding but it doesn’t work it gives me [object object].
now i just want when i write something in input name or telephone displays, but in my example it gives me [object object]

add-contact.component.html

<div class="row mt">
    <div class="col s12">
        <form>
            <div class="row">
                <div class="input-field col s6">
                    <i class="fa fa-user prefix"></i>
                    <label for="Name">Name</label>
                    <input type="text" name="name" [(ngModel)]="contact.name">
                </div>
                <div class="input-field col s6">
                    <i class="fa fa-phone prefix"></i>
                    <label for="telephone">telephone</label>
                    <input type="text" name="telephone" [(ngModel)]="contact.telephone">
                </div>
            </div>

        </form>
    </div>
    <button type="submit" class="btn-large red">submit</button>
    <p>{{ contact }}</p>
</div>

app/models/Contact.ts

export interface Contact{
    id?: string; 
    name?: string;
    telephone?: number;
  }

add-contact.component.ts

export class AddContactComponent implements OnInit {
  contact : Contact = {
    name:'',
    telephone:0 
  }

app.module.ts
i add FormsModule in app.module.ts

import { FormsModule } from '@angular/forms';



  imports: [
.
.
.
FormsModule 
]

Solution

Used the the whole object instead of the property in the interpolation.

Here is a Working demo.

<div class="row mt">
    <div class="col s12">
        <form>
            <div class="row">
                <div class="input-field col s6">
                    <i class="fa fa-user prefix"></i>
                    <label for="Name">Name</label>
                    <input type="text" name="name" [(ngModel)]="contact.name">
                </div>
                <div class="input-field col s6">
                    <i class="fa fa-phone prefix"></i>
                    <label for="telephone">telephone</label>
                    <input type="text" name="telephone" [(ngModel)]="contact.telephone">
                </div>
            </div>

        </form>
    </div>
    <button type="submit" class="btn-large red">submit</button>
    <p>{{ contact.telephone}}</p>
</div>

Answered By – Alvin Saldanha

Answer Checked By – Terry (BugsFixing Volunteer)