无法绑定到“ngModel”，因为它不是“输入”的已知属性。测试.spec.ts

Posted 2023-03-13

【中文标题】无法绑定到“ngModel”，因为它不是“输入”的已知属性。测试.spec.ts

【英文标题】：Can't bind to 'ngModel' since it isn't a known property of 'input'. test .spec.ts

【发布时间】：2017-04-16 01:29:33

【问题描述】：

我已链接到另一张票。此错误仅发生在测试中，并且我已为每个链接消息导入 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'>

【问题讨论】：

我不使用 rc5 我正在使用一个使用 angular cli 的新构建的应用程序。它适用于 ng 服务。仅测试问题

***.com/questions/40373099/…

【参考方案1】：

同时添加FormsModule

imports: [CommonModule, ReactiveFormsModule, FormsModule],