Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro no ngModel

Estou fazendo um formulário, porem quando tento executar o form gera o erro abaixo Já tentei todas as formas, preciso de um help Obrigado

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" for="nome">Nome</label>
            <input type="text" class="form-control" name="nome" id="nome" [ERROR ->][(ngModel)]="aluno.nome">
        </div>

ConcentradoModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ConcentradoComponent } from './concentrado.component';
import { ConcentradoService } from '../services/concentrado.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ConcentradoComponent],
  exports: [ConcentradoComponent],
  providers: [ConcentradoService]
})
export class ConcentradoModule { }

ConcentradoComponent

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

import { Concentrado } from '../models/concentrado';
import { Aluno } from '../models/aluno';
import { Curso } from '../models/curso';

@Component({
    moduleId: module.id,
    selector: 'concentrado',
    templateUrl: './concentrado.component.html',
    styleUrls: ['./concentrado.component.css']
})
export class ConcentradoComponent implements OnInit {
    sucesso: boolean = false;
    cursos: Curso[];
    aluno: Aluno;

    constructor() {
        this.cursos = [
            new Curso('angular2', 'Angular 2'),
            new Curso('javascript', 'JavaScript')
        ];
        this.aluno = new Aluno();
    }

    enviar(): void {
        alert('teste');
        console.log(this.aluno.nome);
        this.sucesso = true;
    }

    debug(): string {
        return JSON.stringify(this.aluno);
    }

    ngOnInit() {
    }

}

AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { CommonModule } from '@angular/common';
import { routing } from './app.routes'

import { AppComponent } from './app.component';
import { ConcentradoModule } from './concentrado/concentrado.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    ConcentradoModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export class Aluno{
    constructor(
        public nome?: string,
        public email?: string,
        public idade?: number,
        public curso?: string){}
}

export class Curso{
    constructor(
        public codigo,
        public nome){}
}
3 respostas
solução!

Parece que você não importou os módulos do angular como FormModule em sua app. Daí o ngModel não fica disponível.

Boa noite Flávio!!! Desde já agradeço atenção, realmente faltava importar o FormModule, agora mudou o erro. Os input's, sem o select, está funcionando, porem quando coloco o Select e Options gera o seguinte erro:

zone.js:569 Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token # at column 1 in [#curso of cursos] in ng:///ConcentradoModule/ConcentradoComponent.html@25:12 ("ass="form-control" [(ngModel)]="aluno.curso">
                <option value="">Selecione</option>
                <option [ERROR ->]*ngFor="#curso of cursos" [value]="curso.codigo">
                    {{curso.nome}}
                </option>
"): ng:///ConcentradoModule/ConcentradoComponent.html@25:12
Parser Error: Unexpected token # at column 1 in [#curso of cursos] in ng:///ConcentradoModule/ConcentradoComponent.html@25:12 ("el)]="aluno.curso">
                <option value="">Selecione</option>
                <option *ngFor="#curso of cursos" [ERROR ->][value]="curso.codigo">
                    {{curso.nome}}
                </option>
"): ng:///ConcentradoModule/ConcentradoComponent.html@25:38
Parser Error: Unexpected token # at column 1 in [#curso of cursos] in ng:///ConcentradoModule/ConcentradoComponent.html@25:12 ("        <option value="">Selecione</option>
                <option *ngFor="#curso of cursos" [value]="curso.codigo">[ERROR ->]
                    {{curso.nome}}
                </option>

Formulario HTML

        <div class="form-group">
            <label class="control-label" for="curso">Curso</label>
            <select name="curso" id="curso" class="form-control" [(ngModel)]="aluno.curso">
                <option value="">Selecione</option>
                <option *ngFor="#curso of cursos" [value]="curso.codigo">
                    {{curso.nome}}
                </option>
            </select>
        </div>

Você não usou let no ngFor.

Se pintar outra dúvida, novo post.