Búsqueda de sitios web

angular - Excepción de Angular4: No se puede enlazar a 'ngClass' ya que no es una propiedad conocida de 'input'

En mi proyecto estoy usando carga perezosa. Entonces, en mi módulo de registro estoy usando la directiva [ngClass] para agregar la clase inválida cuando formGroup tiene algunos errores de validación en mi formulario de registro. Pero mi código lanza una excepción al intentar agregar la directiva [ngClass] en mi formulario.

No se puede enlazar a 'ngClass' ya que no es una propiedad conocida de 'input'

Mientras investigaba el error en sí llegué a varias soluciones, como agregar el 'directive: [NgStyle]' al componente, pero esto no resuelve el problema.

Aquí está mi código:

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']">

Gracias por tu ayuda.

Respuesta #1

Dado que RegisterComponent fue declarado en el módulo RegisterRouter (¿cuál es el nombre del módulo?), entonces tienes que importar CommonModule allí:

@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 { }

Respuesta #2

Para cualquiera que todavía tenga estos problemas incluso después de importar CommonModule

Tenía una biblioteca que simplemente no podía compilar. Tenía varios módulos... que estaban importando otros componentes/pequeños:

Uno de los componentes en uno de mis módulos más pequeños tenía [ngClass] en él... eso hacía que la biblioteca no se compilara y lanzara No se puede enlazar a 'ngClass' ya que no es una propiedad conocida de 'div'

Aparentemente... estaba exportando todos mis componentes para esos módulos... pero no el módulo en sí en el archivo public-api.ts (el módulo que importaba CommonModule):

export * from './lib/af-layout/af-layout.module'; // <==== THAT WAS MISSING
export * from './lib/af-layout/components/af-layout-header/af-layout-header.component';

Me tomó mucho tiempo encontrar eso... ya que el error me estaba indicando que CommonModule no estaba importado... no que faltara una exportación.

Respuesta #3

Además de que el Módulo Común esté incluido en los imports del módulo principal (por ejemplo, app.module), también asegúrese de que el componente que está causando el problema esté realmente incluido en las declaraciones del módulo principal.

Respuesta #4

En mi caso, al usar Angular 17 y 18, me encontré con un problema donde no podía usar [ngClass], *ngIf, *ngFor, Forms, pero esto se resolvió agregando la siguiente línea:

Teniendo en cuenta que el app.module.ts fue reemplazado por el app.config.ts (de cierta manera)

Enlace: https://angular.io/guide/architecture-services

Artículos relacionados