Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't bind to 'ngModelOptions' since it isn't a known property of 'input' in submodule in Angular

I have several submodules in my project, one of them, is the SharedModule (which shares the modules in common for all).

The SharedModule includes the FormsModule and ReactiveFormsModule import. I import this module into the module that I want to use the forms, but it doesn't work.

Component template chunk

<div class="md-form">
<input [formControl]="personGroup.get('medication')" [ngModelOptions]="{standalone: true}" mdbActive type="text" id="medication" class="form-control" #medication>
<label for="medication" class="">Ingrese el medicamento</label>
<button class="btn btn-success btn-sm" (click)="addMedication(medication.value)">
  <i class="fa fa-plus" aria-hidden="true"></i>
</button>

SubModule

@NgModule({
  declarations: [    
    ...
  ],
  imports: [
    ...
    SharedModule,
    ...
  ],
  exports: [
    ...
  ]
})
export class PeopleModule { }

The SharedModule

 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MDBBootstrapModule } from 'angular-bootstrap-md';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 @NgModule({
   imports: [
     CommonModule,
     ...
     FormsModule, 
     ReactiveFormsModule,
     ...
   ],
   exports: [
     ...
     FormsModule, 
     ReactiveFormsModule,
     ...
   ],
   declarations: [
     ...
   ],
   schemas: [ NO_ERRORS_SCHEMA ],
 })
 export class SharedModule { }
like image 219
Justin Castillo Avatar asked Apr 28 '18 21:04

Justin Castillo


People also ask

Can't bind to ngModelOptions since it isn't a known property of?

Answers related to “can't bind to 'ngmodeloptions' since it isn't a known property of 'input'” If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Can't bind to since it isn't a known property of angular?

What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? link. This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs. Perhaps you declared "x" in an application sub-module but forgot to export it.

Can't bind to input since it isn't a known property of input?

To fix Can't bind to 'ngModel' since it isn't a known property of 'input' error in Angular applications we have to import FormModule in app. module. ts file. If you are using FormBuilder class to create reactive form we have to import ReactiveFormsModule as well to avoid below error.

Can't bind to formGroup since it isn't a known property of?

What Does This Error Mean? Angular is trying to tell us that it doesn't know about the formGroup directive on the <form> element in your component. This usually happens when the wrong forms module is imported, the right module is imported in the wrong place or the ReactiveFormsModule is just not imported at all.


1 Answers

In order to use ngModelOptions, the ngModel directive should be applied to the input element:

<input ngModel [ngModelOptions]="{standalone: true}" ... />

because ngModelOptions is a property of the ngModel directive.

like image 193
ConnorsFan Avatar answered Sep 20 '22 02:09

ConnorsFan