Angular4异常:由于它不是'input'的已知属性，因此无法绑定到'ngClass' [英] Angular4 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input'

问题描述

在我的项目中，我正在使用延迟加载，因此，在我的注册模块中，当 formGroup 出现一些验证错误时，我使用 [ngClass] 指令添加无效的类.在我的注册表上.但是当我尝试在表单上添加 [ngClass] 指令时，我的代码引发了异常.

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.

由于它不是'input'的已知属性，因此无法绑定到'ngClass'

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

在调查错误本身时，我想到了几种解决方案，例如在组件中添加指令:[NgStyle]"，但这并不能解决问题.

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.

这是我的代码:

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

谢谢您的帮助.

推荐答案

由于在 RegisterRouter (模块的名称是什么?)中声明了 RegisterComponent (模块名)，所以您必须在那里导入 CommonModule :

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

这篇关于Angular4异常:由于它不是'input'的已知属性，因此无法绑定到'ngClass'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！