angular - استثناء Angular4: لا يمكن الربط بـ 'ngClass' لأنه ليس خاصية معروفة لـ 'input'

في مشروعي أستخدم التحميل الكسول، لذلك في وحدة التسجيل الخاصة بي أستخدم التوجيه [ngClass] لإضافة فئة غير صالحة عندما يحتوي formGroup على بعض أخطاء التحقق في نموذج التسجيل الخاص بي. لكن الكود الخاص بي يطرح استثناء عند محاولة إضافة التوجيه [ngClass] على النموذج.

لا يمكن الربط بـ 'ngClass' لأنه ليس خاصية معروفة لـ 'input'

أثناء التحقيق في الخطأ نفسه توصلت إلى عدة حلول، مثل إضافة 'التوجيه: [NgStyle]' إلى المكون، لكن هذا لا يحل المشكلة.

إليك شفرتي:

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

شكراً لمساعدتك.

الإجابة رقم 1

نظرًا لأنه تم إعلان RegisterComponent في وحدة RegisterRouter (ما اسم الوحدة؟)، فعليك استيراد CommonModule هناك:

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

الإجابة رقم 2

لأي شخص لا يزال يواجه هذه المشكلة حتى بعد استيراد CommonModule

كان لدي مكتبة لم أستطع تجميعها. كان لدي عدة وحدات.. كانت تستورد مكونات أصغر أخرى:

أحد المكونات في أحد وحداتي الصغيرة كان يحتوي على [ngClass].. كان يتسبب في عدم تجميع المكتبة وإعطاء الخطأ لا يمكن الربط بـ 'ngClass' لأنه ليس خاصية معروفة للعنصر 'div'

من الواضح... كنت أقوم بتصدير جميع مكوناتي لذلك الوحدات... ولكن ليس الوحدة نفسها في ملف public-api.ts (الوحدة التي قامت باستيراد 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';

استغرق مني وقتًا طويلاً لأجد ذلك.. حيث كان الخطأ يوجهني نحو عدم استيراد CommonModule.. وليس لأن تصديرًا كان مفقودًا.

الإجابة رقم 3

بخلاف تضمين الوحدة المشتركة في الواردات للوحدة الأم (مثل app.module)، تأكد أيضًا من أن المكوّن الذي يسبب المشكلة مدرج فعليًا في التصريحات للوحدة الأم.

الإجابة رقم 4

في حالتي، عند استخدام Angular 17 و 18، واجهت مشكلة حيث لم أتمكن من استخدام [ngClass]، *ngIf، *ngFor، النماذج، لكن تم حل هذه المشكلة بإضافة السطر التالي:

مع أخذ في الاعتبار أنه تم استبدال app.module.ts بـ app.config.ts (بطريقة معينة)

الرابط: https://angular.io/guide/architecture-services