Angular4 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input'

Ahmer Ali Ahsan

In my project I'm using lazy loading So, In my registration module I'm using [ngClass] directive to add invalid class when formGroup has some validation errors on my registration form. but my code throws an exception when trying to add [ngClass] directive on my form.

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

While investigating the error itself i came to several solutions, like adding the 'directive: [NgStyle]' to the component, but this does not solve the problem.

Here is my code:

register.router.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from "app/modules/register/register.component";


const routes: Routes = [
{
    path: '', pathMatch: 'full',
    component: RegisterComponent
}
];

@NgModule({
    imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule
],
declarations: [RegisterComponent],
    exports: [RouterModule]
})
export class RegisterRouter { }

register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRouter } from './register.router';  


@NgModule({
    imports: [
      CommonModule,
      RegisterRouter
],
    declarations: []
})
export class RegisterModule { }

register.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

    @Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

//#region Declarations
    UserForm: FormGroup;
    inValid: boolean = false;
//#endregion

constructor(
    private _fb: FormBuilder) { 
    this.UserForm =  _fb.group({
    "_firstname" : ['', Validators.required]
    });
}
}

register.component.html

<input type="text" class="form-control" [ngClass]="{'ahinValid': inValid}" id="txtFirst_Name" aria-describedby="ariaFirstName" placeholder="Enter First Name"
          name="_firstname" [formControl]="UserForm.controls['_firstname']">

Thank you for your help.

yurzui

Since RegisterComponent was declared in RegisterRouter(what's the name for module?) module then you have to import CommonModule there:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    CommonModule      <================== this line
  ],
  declarations: [
    RegisterComponent // this component wants to have access to built-in directives
  ],
  exports: [RouterModule]
})
export class RegisterRouter { }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

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

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

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

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

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

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

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

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

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

Angular 4: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular 4 "Can't bind to 'ngModel' since it isn't a known property of 'input'."

Angular Can't bind to 'dirUnless' since it isn't a known property

Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property

Can't bind to 'x' since it isn't a known property of 'input' Angular 2

Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular 2 - Can't bind to 'ngModel' since it isn't a known property of 'input'

Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular

Can't bind to '(ngModel' since it isn't a known property of 'input' in angular unit test case

angular2 testing: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular 2: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular 2: Can't bind to 'uploader' since it isn't a known property of 'input'

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

Angular9-MatDatePicker: Can't bind to 'ngModel' since it isn't a known property of 'input'

Can't bind to 'ngModel' since it isn't a known property of 'input' angular 5 with pug

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

TOP Ranking

HotTag

Archive