Angular 2 - 无法绑定到 'ngModel'，因为它不是 'input' 的已知属性

Question

我在 plunker 中有一个 Angular 2 内联编辑组件。但突然我收到上述错误。它怎么了？

Plunker 代码：http://plnkr.co/edit/3AODo6YGEhvPOKzloofz?p=preview

父组件：

<inline-edit [editEnable]="edit" [(ngModel)]="editableText" (onSave)="saveEditable($event)"></inline-edit>

子组件：

<div id="inlineEditWrapper" (click)="edit(value)" class="iedit">
    <!-- Editable value -->
    <a  [hidden]="editing">{{ value }}&nbsp;<i class="glyphicon glyphicon-pencil" data-hidden="editing"></i></a>

    <!--<span class="glyphicon glyphicon-pencil" [hidden]="editing"></span>-->

    <!-- inline edit form -->
    <form  #inlineEditForm="ngForm" class="inlineEditForm form-inline" (ngSubmit)="onSubmit(value)" [hidden]="!editing">
        <div class="form-group">

            <!-- inline edit control  -->
           <input style="margin-bottom:10px;" #inlineEditControl class="form-control" [(ngModel)]="value"/>

            <!-- inline edit save and cancel buttons -->
            <br/>
           <span >
                <button type="submit" class="btn btn-primary">Change</button>
                <button class="btn btn-default" (click)="cancel(value)">Cancel</button>
           </span>

        </div>
    </form>
</div>

Answer 1

您可以按照以下步骤操作：

第 1 步：加载 angular 表单的包

'@angular/forms': {
      main: 'bundles/forms.umd.js',
      defaultExtension: 'js'
}

第 2 步：导入 disableDeprecatedForms、provideForms

import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(App, [
   disableDeprecatedForms()
   provideForms()
]).catch(err => console.error(err));

第 3 步：从内联中的“@angular/forms”导入 ControlValueAccessor，NG_VALUE_ACCESSOR-edit.component.ts

第 4 步：将表单中的输入元素调整为：

<input style="margin-bottom:10px;" #inlineEditControl class="form-control" name="first_name" #first_name="ngModel" [(ngModel)]="value"/>

我在 here

工作

Angular 2 - 无法绑定到 'ngModel'，因为它不是 'input' 的已知属性

Angular 2 - Can't bind to 'ngModel' since it isn't a known property of 'input'

forms

angularjs

angular2-forms

angular2-template

angular

Angular 2 - 无法绑定到 'ngModel'，因为它不是 'input' 的已知 属性

Angular 2 - Can't bind to 'ngModel' since it isn't a known property of 'input'

forms

angularjs

angular2-forms

angular2-template

angular

Angular 2 - 无法绑定到 'ngModel'，因为它不是 'input' 的已知属性