Pesquisa de site

typescript - A ligação bidirecional do Angular 2 usando ngModel não está funcionando

Não é possível vincular a 'ngModel' pois não é uma propriedade conhecida do elemento 'input' e não há diretivas correspondentes com uma propriedade correspondente

Nota: estou usando alpha.31

import { Component, View, bootstrap } from 'angular2/angular2'

@Component({
    selector: 'data-bind'
})
@View({
    template:`
        <input id="name" type="text" 
            [ng-model]="name" 
            (ng-model)="name = $event" />
        {{ name }}
    ` 
})
class DataBinding { 
    name: string;

    constructor(){
        this.name = 'Jose';
    }
}

bootstrap(DataBinding);

Resposta #1

O Angular lançou sua versão final em 15 de setembro. Diferente do Angular 1, você pode usar a diretiva ngModel no Angular 2 para ligação bidirecional de dados, mas você precisa escrevê-la de um jeito um pouco diferente, como [(ngModel)] (Sintaxe Banana na caixa). Quase todas as diretivas principais do Angular 2 não suportam mais kebab-case; em vez disso, você deve usar camelCase.

Agora a diretiva ngModel pertence ao FormsModule, por isso você deve importar o FormsModule do módulo @angular/forms dentro da opção de metadados imports do AppModule (NgModule). A partir daí, você pode usar a diretiva ngModel dentro da sua página.

app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
    <input type="text" [(ngModel)]="myModel"/>
    {{myModel}}
  `
})
export class AppComponent { 
  myModel: any;
}

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ], //< added FormsModule here
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Demo Plunkr

Resposta #2

Pontos-chave:

  1. ngModel no angular2 é válido apenas se o FormsModule estiver disponível como parte do seu AppModule.

  2. ng-model está sintaticamente errado.

  3. colchetes [..] referem-se à vinculação de propriedade.
  4. chaves circulares (..) se referem à vinculação de eventos.
  5. quando colchetes quadrados e colchetes circulares são colocados juntos como [(..)] refere-se à ligação bidirecional, comumente chamada de banana box.

Então, para corrigir seu erro.

Etapa 1: Importando FormsModule

import {FormsModule} from '@angular/forms'

Passo 2: Adicione-o ao array de imports do seu AppModule como

imports :[ ... , FormsModule ]

Passo 3: Altere ng-model para ngModel com caixas de banana como

 <input id="name" type="text" [(ngModel)]="name" />

Nota: Além disso, você pode lidar com o databinding bidirecional separadamente, como mostrado abaixo

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}

Resposta #3

No meu caso, estava faltando um atributo "name" no meu elemento de entrada.

Artigos relacionados