无法绑定到 'ngModel',因为它不是 'input' 的已知 属性。测试 .spec.ts
Can't bind to 'ngModel' since it isn't a known property of 'input'. test .spec.ts
我已经链接到另一张票。这个错误只发生在测试中,我已经为每个链接的消息导入了 FormsModule。我正在使用 Angular 2.2.1.
ngModel 未在 'ng test' 中定义 我导入了 FormsModule 和 ReactiveFormsModule 但没有效果。我已经对此进行了 24 小时的研究,但离我还差得很远。大多数与升级有关,我擦除并重新启动了同样的问题,使用 ng generate 创建时测试模板非常简单。
我使用 angular 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'>
同时添加 FormsModule
imports: [CommonModule, ReactiveFormsModule, FormsModule],
我已经链接到另一张票。这个错误只发生在测试中,我已经为每个链接的消息导入了 FormsModule。我正在使用 Angular 2.2.1.
ngModel 未在 'ng test' 中定义 我导入了 FormsModule 和 ReactiveFormsModule 但没有效果。我已经对此进行了 24 小时的研究,但离我还差得很远。大多数与升级有关,我擦除并重新启动了同样的问题,使用 ng generate 创建时测试模板非常简单。
我使用 angular 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'>
同时添加 FormsModule
imports: [CommonModule, ReactiveFormsModule, FormsModule],