2016-08-10 6 views
0

私はカスタムダイナミックフォームをアンギュラ2で実装しようとしています。私は既に作成されたセーブに加えて、削除やキャンセルなどの機能を追加しました。角2のダイナミックフォームプランカで作業しますが、システム上では動作しません

私はPlunkerですべての変更を加えましたが、ローカルシステムで同じものを実装しようとするとエラーが発生します。

ワーキングPlunkerコード:http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview

エラーメッセージ:エラーが来ているCan't bind to 'ngModel' since it isn't a known property of 'input'.

HTMLコード:

<div> 
    <form [formGroup]="form"> 

    <div *ngFor="let question of questions" class="form-row"> 
     <label [attr.for]="question.key">{{question.label}}</label> 

    <div [ngSwitch]="question.controlType"> 

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key" 
      [id]="question.key" [type]="question.type" [(ngModel)]="question.value"> 

    <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" > 
     <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option> 
    </select> 

    <input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value" 
      [id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}"> 

    </div> 
    <div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div> 
    </div> 

    <div class="form-row"> 
     <button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button> 
     <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button> 
     <button type="button" class="btn btn-default" (click)="clear()">Clear</button> 

    </div> 
    </form> 

    <div *ngIf="payLoad" class="form-row"> 
    <strong>Saved the following values</strong><br>{{payLoad}} 
    </div> 
</div> 

答えて

0

私はモジュールIDを追加するダイナミックフォームのチュートリアルをやって同じ問題を解決しましたを各コンポーネントに追加します。例:問題は本番でangular2 RC5を実行すると、バンドルされたJavaScriptを正しく依存関係を挿入することはできませんです

@Component({ 
     selector: 'dynamic-form', 
     templateUrl: 'app/component/dynamic-form/dynamic-form.component.html', 
     providers: [QuestionControlService], 
     moduleId: 'dynamic-form' 
    }) 

、提案別の解決策は、NgModuleで宣言配列順序を変更するが、最初にされました私の場合には十分です。

declarations: [ DynamicFormQuestionComponent , DynamicFormComponent, AppComponent]

関連する問題