'ngModel'は 'input'の既知のプロパティではないため、バインドできません。テスト.spec.ts

Question

私は別のチケットにリンクされています。このエラーはテストでのみ発生し、リンクされたメッセージごとにFormsModuleをインポートしました。私はAngular 2.2.1を使用しています。

ngModelが 'ng test'で定義されていませんFormsModuleとReactiveFormsModuleをインポートしても効果がありません。私は24時間これを研究しており、私は近くにいません。ほとんどのものがアップグレードに関連しています。同じ問題でワイプして再起動し、ng generateを使用して作成したテストテンプレートはかなり裸です。

私はangle cliを使って自分のアプリを作りました（そしてそれを再構築しました...）。そして、私はフォームのインポートを追加しました。

私のシンプルなテンプレートですが、それはフォームではなくdivであり、違いがないことに注意してください。 'ng serve'は合理的に見えるので、コードは理論上正しいものです。ここ

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="col-sm-2 control-label" for='line1'>Address 1</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" placeholder="Line 1" id='line1' [(ngModel)]='address.line1' required> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword" class="col-sm-2 control-label" for='line2'>Address 2</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="line2" placeholder="Line 2" [(ngModel)]='address.line2'> 
    </div> 
    </div> 
    <div class="form-inline"> 
    <div class="form-group"> 
     <label for="inputPassword" class="col-sm-2 control-label" for='Suburb'>Suburb</label> 
     <div class="col-sm-6"> 
     <input type="text" class="form-control" id="suburb" placeholder="Suburb" [(ngModel)]='address.suburb'> 
     </div> 
     <div class="col-sm-2"> 
     <input type="text" class="form-control" id="State" placeholder="State" [(ngModel)]='address.state'> 
     </div> 
     <div class="col-sm-2"> 
     <input type="text" class="form-control" id="postcode" placeholder="Postcode" [(ngModel)]='address.postcode'> 
     </div> 
    </div> 
    </div> 
</form> 

は私のテスト仕様である。ここ

は私の形です...、私は、多くの研究の後に何の喜びをCommonModuleとReactiveFormsModuleとFormsBuilderを添加していません。

/* tslint:disable:no-unused-variable */ 

import { TestBed, async } from '@angular/core/testing'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms'; 


import { AddressComponent } from './address.component'; 
import { Address } from './address'; 

describe('Component: Address',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [AddressComponent], 
     imports: [CommonModule, ReactiveFormsModule], 
     providers: [FormBuilder] 
    }); 
    }); 

    it('should create an instance',() => { 
    let component = new AddressComponent(); 
    expect(component).toBeTruthy(); 
    }); 

    it('should handle address',() => { 
    expect(true).toBeTruthy(); 
    }); 

}); 

これは私のコンポーネントです。かなりシンプルな...私が取得

import { Input, Component, OnInit } from '@angular/core'; 
import { Address } from './address'; 

@Component({ 
    selector: 'app-address', 
    templateUrl: './address.component.html', 
    styleUrls: ['./address.component.css'], 
}) 

export class AddressComponent implements OnInit { 

    @Input() address: Address; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

エラーは次のとおりです。

"): AddressComponent@4:78 
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("iv class="col-sm-10"> 
     <input type="text" class="form-control" id="line2" placeholder="Line 2" [ERROR ->][(ngModel)]='address.line2'> 

Answer 1

も同様FormsModuleを追加

imports: [CommonModule, ReactiveFormsModule, FormsModule],