首页 文章

Angular 2 - 't bind to ' ngModel ' since it isn' t 'input'的已知属性

提问于
浏览
0

我在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 -->
            
<span > <button type="submit" class="btn btn-primary">Change</button> <button class="btn btn-default" (click)="cancel(value)">Cancel</button> </span> </div> </form> </div>

1 回答

  • 2

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

    第1步:为角形加载包装

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

    第2步:导入disableDeprecatedForms,提供Forms

    import {disableDeprecatedForms, provideForms} from '@angular/forms';
    
    bootstrap(App, [
       disableDeprecatedForms()
       provideForms()
    ]).catch(err => console.error(err));
    

    第3步:从inline-edit.component.ts中的“@ angular / forms”导入ControlValueAccessor,NG_VALUE_ACCESSOR

    第4步:在表单中调整输入元素:

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

    here这对我有用

相关问题