Angular 2 - 由於它不是'input'的已知屬性，因此無法綁定到'ngModel'

Question

我在plunker中有一個Angular 2 Inline Editing組件。但突然間我得到了上述錯誤。這是怎麼回事？

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/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：導入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

爲我工作：形式輸入元素