CODEWITHSUNDEEP
angularangular2-testing
KenF
KenF

Reputation: 624

Can't bind to 'ngModel' since it isn't a known property of 'input'. test .spec.ts

I haev been linked to another ticket. This error ONLY occurs in test and I have imported the FormsModule per linked message. I am using Angular 2.2.1.

ngModel not defined in 'ng test' I have imported FormsModule and ReactiveFormsModule to no effect. I have been researching this for 24 hours and I am no closer. Most are related to upgrade, I wiped and restarted with same issue, testing template is pretty bare when created using ng generate.

I used angular cli to build my app (and rebuild it...) and I have added forms import as it appears important.

Here is my simple template, Note that it was not a form but a div and it makes not difference. 'ng serve' looks reasonable so the code is theoretically correct.

Here is my form...

<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>

here is my test spec, I added CommonModule and ReactiveFormsModule and FormsBuilder after much research, no joy.

    /* 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();
  });

});

This is my component. Pretty simple...

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() {
  }

}

Error I get is:

"): 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'>

Upvotes: 3

Views: 1686

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657771

Add the FormsModule as well

imports: [CommonModule, ReactiveFormsModule, FormsModule],

Upvotes: 5

Related Questions