Guys I’m in need of help, I’m not getting ngModel to work at angular 6

Asked

Viewed 85 times

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

  • 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

  • Take a look at this https://stackoverflow.com/questions/50869999/angular-6-cant-use-ngmodel

  • 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

  • Dude... you forgot to call the service at ngOnInit

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.