Staff I need help, I can not make ngModel work in angle 6

0

Follow the error and just below the code:

CadastroRestaurantComponent.html:6 ERROR TypeError: 'Cannot read property 'name' of undefined'
    at Object.eval [as updateDirectives] (CadastroRestaurantComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
    at checkAndUpdateView (core.js:10458)
    at callViewAction (core.js:10699)
    at execComponentViewsAction (core.js:10641)
    at checkAndUpdateView (core.js:10464)
    at callViewAction (core.js:10699)
    at execEmbeddedViewsAction (core.js:10662)
    at checkAndUpdateView (core.js:10459)
    at callViewAction (core.js:10699)

import { Component, OnInit, Input} from '@angular/core';
import { Restaurant } from '../restaurant/restaurant.model'
import { RestaurantsService } from '../restaurants.service'

@Component({
  selector: 'sfc-cadastro-restaurant',
  templateUrl: './cadastro-restaurant.component.html',
  styleUrls: ['./cadastro-restaurant.component.css']
})
export class CadastroRestaurantComponent implements OnInit {

  @Input() restaurant: Restaurant
  constructor(private restaurantService: RestaurantsService) { }

  ngOnInit() {

  }

  salvar():void {

    this.restaurantService.salvar(this.restaurant)

  }

}
<div>

    <form (ngSubmit)="salvar()">
        <div class="form-group">
          <label for="inputAddress2">Nome</label>
          <input type="text" class="form-control" id="inputAddress2" placeholder="Bar do Seu joão" required [ngModel]="restaurant.name">
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">Categoria</label>
            <input type="text" placeholder="Buteco" class="form-control" id="inputCity" [(ngModel)]="restaurant.category">
          </div>
          <div class="form-group col-md-4">
            <label for="inputState">Avaliação</label>

          </div>
        </div>
        <button type="submit" class="btn btn-primary">Salvar</button>
      </form>
</div>
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import {RouterModule} from '@angular/router';

import {ROUTES} from './app.route'

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { AboutComponent } from './about/about.component';
import { RestaurantsComponent } from './restaurants/restaurants.component'
import { RestaurantComponent } from './restaurants/restaurant/restaurant.component'
import { RestaurantsService } from './restaurants/restaurants.service';
import { CadastroRestaurantComponent } from './restaurants/cadastro-restaurant/cadastro-restaurant.component'


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    AboutComponent,
    RestaurantsComponent,
    RestaurantComponent,
    CadastroRestaurantComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(ROUTES)
  ],
  providers: [RestaurantsService],
  bootstrap: [AppComponent ]
})
export class AppModule { }
    
asked by anonymous 19.09.2018 / 03:10

0 answers