Website-Suche

angular - Angular4 Ausnahme: Kann nicht an 'ngClass' binden, da es keine bekannte Eigenschaft von 'input' ist

In meinem Projekt verwende ich Lazy Loading. Also verwende ich in meinem Registrierungsmodul die [ngClass]-Direktive, um eine ungültige Klasse hinzuzufügen, wenn das formGroup auf meinem Registrierungsformular einige Validierungsfehler hat. Aber mein Code wirft eine Ausnahme, wenn versucht wird, die [ngClass]-Direktive auf mein Formular anzuwenden.

Kann nicht an 'ngClass' binden, da es keine bekannte Eigenschaft von 'input' ist

Während ich den Fehler selbst untersuchte, kam ich zu mehreren Lösungen, wie zum Beispiel das Hinzufügen der 'directive: [NgStyle]' zur Komponente, aber das löst das Problem nicht.

Hier ist mein 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']">

Danke für Ihre Hilfe.

Antwort #1

Da RegisterComponent im RegisterRouter (wie heißt das Modul?) Modul deklariert wurde, müssen Sie dort CommonModule importieren:

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

Antwort #2

Für alle, die diese Probleme immer noch haben, selbst nach dem Import von CommonModule

Ich hatte eine Bibliothek, die ich einfach nicht zum Kompilieren bringen konnte. Ich hatte mehrere Module, die andere kleinere Komponenten importierten:

Einer der Komponenten in einem meiner kleineren Module hatte [ngClass] darin.. es würde dazu führen, dass die Bibliothek nicht kompiliert und Kann nicht an 'ngClass' binden, da es keine bekannte Eigenschaft von 'div' ist auswirft

Anscheinend... habe ich alle meine Komponenten für dieses Modul exportiert... aber nicht das Modul selbst in der public-api.ts-Datei (das Modul, das das CommonModule importiert hat):

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

Es hat lange gedauert, das zu finden, da der Fehler mich darauf hingewiesen hat, dass CommonModule nicht importiert wurde, und nicht, dass ein Export fehlte.

Antwort #3

Abgesehen davon, dass das Common Module in die imports des übergeordneten Moduls (z. B. app.module) aufgenommen wird, stellen Sie auch sicher, dass die Komponente, die das Problem verursacht, tatsächlich in den declarations des übergeordneten Moduls enthalten ist.

Antwort #4

In meinem Fall, beim Verwenden von Angular 17 und 18, stieß ich auf ein Problem, bei dem ich [ngClass], *ngIf, *ngFor, Forms nicht verwenden konnte, aber dies wurde durch Hinzufügen der folgenden Zeile behoben:

In Anbetracht der Tatsache, dass die app.module.ts durch die app.config.ts (auf eine bestimmte Weise) ersetzt wurde

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

Verwandte Artikel