[英]Angular2 RC5 tutorial : Can't bind to 'ngModel' since it isn't a known property of 'input'
[英]Angular 2 - Can't bind to 'ngModel' since it isn't a known property of 'input'
我在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 }} <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>
您可以按照以下步骤操作:
第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"/>
那对我有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.