Não encontro o ngModule

Programação
#1

Erro

✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2022-05-15T14:25:56.738Z - Hash: b2460f330d68bec6 - Time: 248ms

Error: src/app/app.component.html:8:57 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                          ~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:8:70 - error TS2339: Property 'name' does not exist on type 'AppComponent'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                                       ~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:8:70 - error TS2339: Property 'name' does not exist on type 'AppComponent'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                                       ~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




✖ Failed to compile.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2022-05-15T14:25:56.946Z - Hash: b2460f330d68bec6 - Time: 122ms

Error: src/app/app.component.html:8:57 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                          ~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:8:70 - error TS2339: Property 'name' does not exist on type 'AppComponent'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                                       ~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:8:70 - error TS2339: Property 'name' does not exist on type 'AppComponent'.

8     <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
                                                                       ~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




✖ Failed to compile.


<div class="container">
  <div class="alert alert-primary" role="alert">
    Funcionario adicionado {{nome}}!
  </div>

  <div class="form-group">
    <label for="exampleInputEmail1">Nome</label>
    <input type="text" class="form-control" name="nome" [(ngModel)]="name" >
  </div>

  <button type="button" class="btn btn-primary" (click)="adicionar(nome)"
    [disabled]="nome.length < 10">Adicionar</button>

</div>

app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nome = 'Dayson Rodrigues';
 

  adicionar(nome : string){
    const numero = Math.round(Math.random() * 100);
    this.nome = 'João ' + numero ;
  }

}

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
#2

Pela mensage, “Can’t bind to ‘ngModel’…”, e olhando seu AppModule, parece que só faltou mesmo importar o FormsModule.

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
#3

Isso mesmo! Obrigado. :wink:

1 curtida