AngModel का उपयोग करते हुए कोणीय 2 दो तरह से बाध्यकारी काम नहीं कर रहा है

Question

'NgModel' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'इनपुट' तत्व की संपत्ति का पता नहीं है और संबंधित संपत्ति के साथ कोई मिलान निर्देश नहीं हैं

नोट: im अल्फा ३ .१ का उपयोग कर

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);

Answer 1

एंगुलर ने 15 सितंबर को इसका अंतिम संस्करण जारी किया है। Angular 1 के विपरीत, आप ngModelAngular 2 में दो तरह से डेटा बाइंडिंग के लिए निर्देश का उपयोग कर सकते हैं , लेकिन आपको इसे थोड़ा अलग तरीके से लिखना होगा [(ngModel)]( जैसे कि एक बॉक्स सिंटैक्स में बनाना )। लगभग सभी कोणीय 2 कोर निर्देश kebab-caseअब आप का उपयोग नहीं करना चाहिए camelCase।

अब ngModelनिर्देश के अंतर्गत आता है FormsModule, यह है कि तुम क्यों चाहिए से अंदर मॉड्यूल के मेटाडाटा विकल्प (NgModule)। इसके बाद आप अपने पेज पर निर्देश का उपयोग कर सकते हैं ।importFormsModule@angular/formsimportsAppModulengModel

एप्लिकेशन / 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);

डेमो प्लंकर

Answer 2

प्रमुख बिंदु:

1. ngModel कोणीय 2 में केवल तभी मान्य किया जाता है जब FormModule आपके AppModule के एक भाग के रूप में उपलब्ध हो।

2. ng-model गंभीर रूप से गलत है।

3. वर्ग ब्रेसिज़ [..] संपत्ति के बंधन को संदर्भित करता है।
4. सर्कल ब्रेसिज़ (..) इवेंट बाइंडिंग को संदर्भित करता है।
5. जब वर्ग और वृत्त ब्रेसिज़ को [(..) के रूप में एक साथ रखा जाता है, तो दो तरह से बंधन को संदर्भित किया जाता है, जिसे आमतौर पर केला बॉक्स कहा जाता है।

तो, अपनी त्रुटि को ठीक करने के लिए।

चरण 1: आयात प्रपत्र Formule

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){

}

Answer 3

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);

Answer 4

मेरे मामले में, मुझे अपने इनपुट तत्व पर "नाम" विशेषता याद आ रही थी।

Answer 5

उत्तर जिसने मेरी मदद की: निर्देश [(ngModel)] = rc5 में अब काम नहीं कर रहा है

इसे सम्‍मिलित करने के लिए: इनपुट फ़ील्ड को अब nameफॉर्म में संपत्ति की आवश्यकता होती है ।

Comments

हां, मुझे भी यही समस्या थी। मैंने नाम विशेषता को इनपुट में रखा और काम किया

— vrbsm

वास्तविक बिल्ली क्या है? उसे भी उस विशेषता की आवश्यकता क्यों है? यह मेरे लिए सबसे अप्रत्याशित समाधान था।

— नीका कासरदेज़

Answer 6

App.module.ts में

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

बाद में @NgModule डेकोरेटर के आयात में:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Answer 7

कोणीय 2 बीटा

यह उत्तर उन लोगों के लिए है जो angularJS v.2.0 बीटा के लिए जावास्क्रिप्ट का उपयोग करते हैं ।

ngModelअपने विचार में उपयोग करने के लिए आपको कोणीय के संकलक को बताना चाहिए जिसे आप एक निर्देश कहा जाता है ngModel।

कैसे?

उपयोग करने के लिए ngModelकोणीय 2 बीटा में दो पुस्तकालय हैं, और वे हैं 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";
    },

});

Comments

FYI करें NgModel FORM_DIRECTIVES में है, इसलिए आप यह भी कर सकते हैं: निर्देश: [ng.common.FORM_DIRECTIVES]

— पीटर जे। हार्ट

@ पीटर जे.हार्ट, वास्तव ng.common.NgModelमें निर्देशन के लिए डिफेक्शन है ngModel। ng.common.FORM_DIRECTIVESकुछ निर्देशों को समूहीकृत ngModelकर रहा है , जो यदि रूपों में उपयोगी हैं। इसलिए हम फॉर्म में हर निर्देश को शामिल नहीं करना चाहते हैंng.common.FORM_DIRECTIVES

— अभिलाष ऑगस्टीन

Answer 8

अपने AppModule में फ़ॉर्म फ़ॉर्ममॉडल को दो तरह से बाँधने के लिए काम करें [(ngModel)] अपने साथ

Comments

जब संभव हो, तो कृपया केवल कोड के बजाय अतिरिक्त स्पष्टीकरण प्रदान करने का प्रयास करें। ऐसे उत्तर अधिक उपयोगी होते हैं क्योंकि वे समुदाय के सदस्यों की मदद करते हैं और विशेष रूप से नए डेवलपर्स समाधान के तर्क को बेहतर ढंग से समझते हैं, और अनुवर्ती प्रश्नों को संबोधित करने की आवश्यकता को रोकने में मदद कर सकते हैं।

— राजन

Answer 9

एनजी-मॉडल के बजाय आप इस कोड का उपयोग कर सकते हैं:

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

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

अपने app.component.ts के अंदर

Answer 10

निम्न फ़ाइलों के लिए कोड जोड़ें।

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

उम्मीद है की यह मदद करेगा