'ngModel' करने के लिए बाध्य नहीं किया जा सकता क्योंकि यह FormsModule

Question

का आयात मैं Angular 2 tutorial on MVA अनुसरण कर रही हूं बावजूद 'इनपुट' का एक ज्ञात संपत्ति नहीं है। मैं काम करने के लिए बाध्यकारी दो तरह से प्रतीत नहीं कर सकता। मैंने Can't bind to 'ngModel' since it isn't a known property of 'input' में फिक्स लागू किया लेकिन यह काम नहीं कर रहा है। त्रुटि के नीचे है: इस प्रकार

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" 
     <p> 
      <input [ERROR ->][(ngModel)]="sampleText" ><br/> 
      <span>{{sampleText}}</span> 
     </p> 
"): TasksComponent@2:19 ; Zone: <root> ; Task: Promise.then ; 

मेरे main.ts कोड है:

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Component, OnInit } from '@angular/core'; 

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


@Component({ 
    selector: 'tasks', 
    template: ` 
     <p> 
      <input [(ngModel)]="sampleText" ><br/> 
      <span>{{sampleText}}</span> 
     </p> 
    ` 
}) 
export class TasksComponent implements OnInit { 
    sampleText: string = ""; 
    ngOnInit() {} 
} 

@Component({ 
    selector: 'app', 
    directives: [TasksComponent], 
    template: ` 
     <h1>Hello World</h1> 
     <tasks></tasks> 
    ` 
}) 
export class AppComponent implements OnInit { 
    constructor() {} 

    ngOnInit() {} 
} 

bootstrap(AppComponent); 

कोड काम करता है अगर मैं दो तरह से बाध्यकारी बाहर टिप्पणी। मैं इसे कैसे ठीक करूं?

Answer 1

आप नीचे दिए गए का उपयोग कर सकते,

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Component, OnInit } from '@angular/core'; 

// Import and use below directive 
import { FORM_DIRECTIVES } from '@angular/forms'; 


@Component({ 
    selector: 'tasks', 
    template: ` 
    <p> 
     <input [(ngModel)]="sampleText" ><br/> 
     <span>{{sampleText}}</span> 
    </p> 
    ` 
    , directives: [FORM_DIRECTIVES] 
}) 
export class TasksComponent implements OnInit { 
    sampleText: string = ""; 

    constructor() {} 

    ngOnInit() {} 
} 

@Component({ 
    selector: 'my-app', 
    directives: [TasksComponent], 
    template: ` 
     <h1>Hello World</h1> 
     <tasks></tasks> 
    ` 
}) 
export class AppComponent implements OnInit { 
    constructor() {} 

    ngOnInit() {} 
} 

bootstrap(AppComponent); 

यहाँ Plunker!!

है लेकिन अगर आप NgModule उपयोग करने पर विचार करना चाहिए, और उस में FormsModule आयात करते हैं।

आशा है कि इससे मदद मिलती है!