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 { }
First, ngModel will be depreciated at angular 7, use fromCrontrolName... And even better to be able to validate
– Willian
Ah, I’m on my cell phone, I’ll tell you what tomorrow, but you haven’t loaded his module, when I load it will warn you it will be deprecated, but it will work normally
– Willian
Take a look at this https://stackoverflow.com/questions/50869999/angular-6-cant-use-ngmodel
– Willian
From a glance I think that tbm has changed a little the way of declaring http://jasonwatmore.com/post/2018/05/11/angular-6-template-driven-forms-validation-example. but I don’t remember if it declares so just because of the validation or if it has moved msm
– Willian
Dude... you forgot to call the service at ngOnInit
– Willian