data binding ngModel not working in angular 12

user_16095862 0
Viewed 5571

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 
]
angular typescript
2 Answers

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>
user_33776610

I struggled a lot with this feature on Angular 12 and finally found this article, it helped me to understand what the actual mistake means: https://www.angularjswiki.com/angular/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input/

Basically, everything you need to do to make it work is to import Ng2SearchPipeModule, FormsModule, ReactiveFormsModule to app.module.ts:

 import { Ng2SearchPipeModule } from 'ng2-search-filter';
   import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
  ],
  imports: [
    Ng2SearchPipeModule,
    FormsModule,
    ReactiveFormsModule,
  ],

And it will start working.

My code: search-bar.compotent.html

<div class="form-group search">
  <input type="text" name="search" class="form-control search-input" placeholder="Search 1,000+ recipes"
    [(ngModel)]="term" />
  <button class="search-button"><i class="material-icons">search</i></button>
</div>
<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let recipie of recipies | filter:term">
      <td>{{recipie.recipieId}}</td>
      <td>{{recipie.name}}</td>
    </tr>
  </tbody>
</table>

search-bar.compotent.ts

import { Component, OnInit } from '@angular/core';
import { RecipiesApiService } from 'src/app/services/recipies-api.service';
import { Recipie } from 'src/app/shared/recipie';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css'],
})
export class SearchBarComponent implements OnInit {
  displayedColumns: string[] = ['recipieId', 'name'];
  term = '';
  recipies: Recipie[] = [];

  constructor(private recipiesApiService: RecipiesApiService) {}

  ngOnInit(): void {
    this.loadRecipies();
  }

  loadRecipies() {
    this.recipiesApiService.getAllRecipies().subscribe((recipies) => {
      this.recipies = recipies;
    });
  }
}

To get data from the server I use my generic API.

user_145269130
Related