web-dev-qa-db-fra.com

Exception Angular4: impossible de se lier à 'ngClass' car ce n'est pas une propriété connue de 'input'

Dans mon projet, j'utilise le chargement paresseux Donc, dans mon module d'inscription, j'utilise [ngClass] directive pour ajouter une classe invalide lorsque formGroup a des erreurs de validation sur mon formulaire d'inscription. mais mon code lève une exception lorsque vous essayez d'ajouter [ngClass] directive sur mon formulaire.

Impossible de se lier à 'ngClass' car ce n'est pas une propriété connue de 'input'

En étudiant l'erreur elle-même, j'ai trouvé plusieurs solutions, comme l'ajout de la "directive: [NgStyle]" au composant, mais cela ne résout pas le problème.

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

Merci de votre aide.

angulartypescript
16
Ahmer Ali Ahsan

Puisque RegisterComponent a été déclaré dans le module RegisterRouter (quel est le nom du module?), Vous devez alors y importer 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 { }
27
yurzui

Solution courante pour le module de partage de chargement différé:

Les deux modules doivent importer CommonModule

Dans le module partagé:

@NgModule({
  imports: [CommonModule],
  ...
})

Module où vous souhaitez utiliser le composant:

@NgModule({
  imports: [CommonModule, ...],
  ...
})
1
Ali Adravi