无法绑定到'ngModel'，因为它不是已知的本机属性或已知指令

Question

I am trying to learn angular2dart and follow the tutorial from anguar2dart site .

Consider following code:

import 'package:angular2/core.dart';

class Hero {
  final int id;
  String name;
  Hero(this.id, this.name);
}

@Component(
    selector: 'my-app',
    template: '''
      <h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name">
      </div>'''
)
class AppComponent {
  String title = 'Tour of Heroes';
  Hero hero = new Hero(1, 'Windstorm');
}

When I compiled this, it shows me the error message:

Build error:
Transform TemplateCompiler on Sample|lib/app_component.ng_meta.json threw error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list. ("
      <div>
        <label>name: </label>
        <input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
      </div>"): AppComponent@5:15

What am I doing wrong?

Answer 1

It seems you are missing transformers for common directives in your pubspec.yaml file.

Check https://github.com/angular-examples/toh-1/blob/master/pubspec.yaml it contains following transformers angular section:

transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart

Answer 2

As of Angular 4, platform_directives is gone.

NgModel is a form directive now. You can include form directives as follows:

import 'package:angular_forms/angular_forms.dart' as forms;

@Component(
    selector: 'my-app',
    directives: const[forms.formDirectives],
)
class AppComponent {
}

Answer 3

Using dart 2.3.0 And following the tutorials. It's necessary to add directives: [formDirectives], as part of your component. And import import 'package:angular_forms/angular_forms.dart';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

import 'hero.dart';

@Component(
  selector: 'my-app',
  template: '''
    <h1>{{title}}</h1>
    <h2>{{hero.name}}</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
  ''',
  directives: [formDirectives],
)
class AppComponent {
  final title = 'Tour of Heroes';
  Hero hero = Hero(1, 'Windstorm');
}

Check the repo with the tutorial example, fortunately, has been updated as long as Dart releases updates: https://github.com/angular-examples/toh-1/blob/master/lib/app_component.dart