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

Question

Двухстороннее связывание 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);

123

angular typescript data-binding 2-way-object-databinding

Источник

user4234499 25 июл '15 в 07:01

15 ответов

Решение

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

ngModel в angular2 действителен, только если FormsModule доступен как часть вашего AppModule.
ng-model синтетически неправильно.
квадратные скобки [..] ссылаются на свойство привязки.
Круговые скобки (..) относятся к привязке события.
когда квадратные и круглые скобки соединяются вместе, как [(..)] означает двухстороннее связывание, обычно называемое банановой коробкой.

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

Шаг 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){

}

57

Источник

user3858469 04 мар '17 в 20:14

В моем случае мне не хватало атрибута "name" в моем элементе ввода.

32

Источник

user6735479 29 ноя '19 в 03:41

Согласно финалу 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);

9

Источник

user415057 07 фев '16 в 08:59

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

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

8

Источник

user4509672 23 янв '17 в 12:34

Примечание : чтобы позволить ngModel существовать независимо внутри реактивной формы, мы должны использовать ngModelOptions следующим образом:

       [ngModelOptions]="{ standalone: true }"

Например :

       <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>

7

Источник

user9572033 12 фев '21 в 10:28

В приложении.module.ts

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

4

Источник

user2773534 10 апр '17 в 15:57

Угловой 2 бета

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

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

Как?

Использовать ngModel В Angular 2 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";
    },

});

3

Источник

user1979465 19 янв '16 в 04:06

Эти вещи отсутствуют / неверны:

Импортировать FormsModule в массив импорта модуля (ngModel требует FormsModule)
ngModel записывается как: [(ngModel)]="modelName"

Таким образом, он будет работать нормально!

2

Источник

user12682818 16 июн '21 в 14:24

Для более новых версий angular-

-напишите это как [(ngModel)]=yourSearch

2. объявить пустую переменную (свойство) с именем yourSearch в файле.ts

добавить FormsModule в файл app.module.ts из - '@angular/forms';
если ваше приложение запущено, перезапустите его после внесения изменений в его файл module.ts

1

Источник

user10419592 30 ноя '20 в 10:39

если вы используете модуль отложенной загрузки, вам необходимо импортировать ngModule и formModule в текущий модуль. пример:

      //shared.module.ts
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

imports: [
    FormsModule,]

1

Источник

user12048003 08 окт '21 в 00:57

Вместо 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

0

Источник

user7527844 07 фев '17 в 09:30

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

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 ]
})

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

0

Источник

user10477288 09 окт '18 в 08:40

Добавление свойства имени решило проблему для меня

0

Источник

Ghizlane KASSIMI 31 янв '23 в 19:51

Импортируйте FormsModule в свой AppModule для работы с двусторонней привязкой [(ngModel)] с вашим

0

Источник

12 май '20 в 11:16

Другие вопросы по тегам angular typescript data-binding 2-way-object-databinding

user2435473 25 июл '15 в 09:08 2015-07-25 09:08 · Accepted Answer · 2015-07-25 09:08

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

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

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

приложение /main.ts

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

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

Демо Планкр