Cannot bind ngModel since is not a property of "Component"

Question

So, i'm trying to make a custom form component in angular 4, i added everything needed for the ngModel to work but it doesnt.

This is my child component:

export class Search extends ControlValueComponent {

}

It extends to the class ControlValueComponent that handles all the "ControlValueAccesor".

This is the class ControlValueAccesor:

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
import {forwardRef, Input} from "@angular/core";

export class ControlValueComponent implements ControlValueAccessor {

  @Input() disabled: boolean;

  innerValue: any = '';

  static providerValueAcessor( ref: any): any {
    return [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ref), multi: true }
    ];
  }

  onTouchedCallback: () => void = () => {};

  onChangeCallback: (_: any) => void = () => {};

  constructor() {
  }

  get value(): any {
    return this.innerValue;
  }

  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}

And in order to have the provider right i use the function ProviderValueAccesor (that is in the ControlValueComponent) like this

providers: ControlValueComponent.providerValueAcessor(SysSearch)

But when i add to my child component the [(ngModel)] it keeps getting the error that ngModel is not a property of the component

I try to use it like this:

<search [(ngModel)] = 'value'><search>

score 3 · Accepted Answer · answered Oct 27 '17 at 15:20

I already fixed the problem.

I needed to import FormsModule directly on the parent component that calls the child component in order for the ngModel to work... I did it like this:

import {FormsModule} from "@angular/forms";


@NgModule({
  imports: [
    FormsModule,
    SearchModule
  ]

This way, the father component is able to use the ngmodel property. Thanks for the help

Luca Taccagni · Answer 2 · 2017-10-27T13:41:13.710

0

import FormsModule in your class file:

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
---->
import {ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule} from "@angular/forms";

edited Oct 27 '17 at 13:41

answered Oct 27 '17 at 13:32

Luca Taccagni

1,059
6
23

It doesn't solve the problem. I already have it imported in the Search class and also imported in the ngModel – Hely Saul Oberto Oct 27 '17 at 15:04
i'm glad this helped at least =) – Luca Taccagni Oct 30 '17 at 11:36

Cannot bind ngModel since is not a property of "Component"

2 Answers2