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 { }