Двухстороннее связывание Angular 2 с использованием ngModel не работает

Невозможно связать с 'ngModel', так как это не свойство know элемента 'input' и нет соответствующих директив с соответствующим свойством

Примечание: я использую альфа.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);
75 голосов | спросил yajra 25 J000000Saturday15 2015, 10:01:49

8 ответов


0

Angular выпустил финальную версию 15 сентября. В отличие от Angular 1, вы можете использовать директиву ngModel в Angular 2 для двухстороннего связывания данных, но вам нужно написать это немного по-другому, как ---- +: = 1 =: + ---- ( Банан в коробочном синтаксисе ). Почти все основные директивы angular2 не поддерживают [(ngModel)], вместо этого вы должны использовать kebab-case.

  

Теперь директива camelCase принадлежит ngModel именно поэтому вы должны FormsModule import из модуля FormsModule внутри параметра метаданных @angular/forms из imports (NgModule). После этого вы можете использовать директиву AppModule на своей странице.

приложение /app.component.ts

ngModel

приложение /app.module.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;
}

приложение /main.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 { }

Демо-планер

ответил Pankaj Parkar 25 J000000Saturday15 2015, 12:08:37
0

Ключевые моменты:

  1. ngModel в angular2 действителен, только если FormsModule доступен как часть вашего AppModule.

  2. ng-model неверно с точки зрения синтеза.

  3. квадратные скобки [..] ссылаются на привязку свойства.
  4. круглые скобки (..) относятся к привязке события.
  5. когда квадратные и круглые скобки соединяются вместе, как [(..)] означает двухстороннее связывание, обычно называемое банановой рамкой.

Итак, чтобы исправить вашу ошибку.

Шаг 1. Импорт FormsModule

import {FormsModule} from '@angular/forms'

Шаг 2. Добавьте его в массив импорта вашего AppModule как

imports :[ ... , FormsModule ]

Шаг 3: измените ng-model на ngModel с банановыми ящиками на

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

Примечание. Кроме того, двустороннюю привязку данных можно обрабатывать как отдельно, так и ниже

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

valueChange(value){

}
ответил Aravind 4 MarpmSat, 04 Mar 2017 23:14:26 +03002017-03-04T23:14:26+03:0011 2017, 23:14:26
0

Что касается финальной версии Angular2, вам даже не нужно импортировать FORM_DIRECTIVES, как предлагалось многими. Однако синтаксис был изменен как кебаб-кейс был упущен для улучшения.

Просто замените ng-model на ngModel и оберните его в ящик бананов . Но теперь вы разбили код на два файла:

app.ts:

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

@Component({
  selector: 'ng-app',
  template: `
    <input id="name" type="text" [(ngModel)]="name"  />
    {{ name }}
  `
})
export class DataBindingComponent {
  name: string;

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

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above

@NgModule({
  declarations: [DataBindingComponent],
  imports:      [BrowserModule, FormsModule],
  bootstrap:    [DataBindingComponent]
})
export default class MyAppModule {}

platformBrowserDynamic().bootstrapModule(MyAppModule);
ответил codef0rmer 7 FebruaryEurope/MoscowbSun, 07 Feb 2016 11:59:00 +0300000000amSun, 07 Feb 2016 11:59:00 +030016 2016, 11:59:00
0

Угловая бета-версия

Этот ответ предназначен для тех, кто использует Javascript для angularJS v.2.0 Beta.

Чтобы использовать ngModel, вы должны указать компилятору angular, что вы используете директиву ngModel

Как?

Для использования ngModel в angular2 Beta есть две библиотеки, и они являются ng.common.FORM_DIRECTIVES и ng.common.NgModel.

На самом деле ng.common.FORM_DIRECTIVES - это не что иное, как группа директив, которые полезны при создании формы. Он также включает директиву NgModel.

app.myApp = ng.core.Component({
    selector: 'my-app',
    templateUrl: 'App/Pages/myApp.html',
    directives: [ng.common.NgModel] // specify all your directives here
}).Class({
    constructor: function () {
        this.myVar = {};
        this.myVar.text = "Testing";
    },

});
ответил Abhilash P A- Pullelil 19 Jam1000000amTue, 19 Jan 2016 07:06:13 +030016 2016, 07:06:13
0

Ответ, который помог мне: Директива [(ngModel)] = больше не работает в RC5

Подводя итог: теперь для полей ввода требуется свойство name в форме.

ответил Ophir Stern 23 Jpm1000000pmMon, 23 Jan 2017 15:34:40 +030017 2017, 15:34:40
0

В app.module.ts

import { FormsModule } from '@angular/forms';

Позже в импорте декоратора @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
ответил M Thomas 10 PMpMon, 10 Apr 2017 18:57:51 +030057Monday 2017, 18:57:51
0

вместо ng-модели вы можете использовать этот код:

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

@Component({
  selector: 'my-app',
  template: `<input #box (keyup)="0">
    <p>{{box.value}}</p>`,
})
export class AppComponent  {}

внутри вашего app.component.ts

ответил anil 7 FebruaryEurope/MoscowbTue, 07 Feb 2017 12:30:43 +0300000000pmTue, 07 Feb 2017 12:30:43 +030017 2017, 12:30:43
0

Добавьте указанный ниже код в следующие файлы.

app.component.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

Надеюсь, это поможет

ответил KarunKumarReddy Mora 9 +03002018-10-09T11:40:57+03:00312018bEurope/MoscowTue, 09 Oct 2018 11:40:57 +0300 2018, 11:40:57

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132