在我的项目中,我使用延迟加载,所以在我的注册模块中,当formGroup在我的注册表单上有一些验证错误时,我使用[ngClass]指令添加无效类.但我的代码在试图在表单上添加[ngClass]指令时抛出了一个异常.

无法绑定到"ngClass",因为它不是"input"的已知属性

在调查错误本身时,我找到了几种解决方案,比如在组件中添加"directive:[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']">

谢谢你的帮助.

推荐答案

自从RegisterRouter年宣布RegisterComponent(模块的名称是什么?)然后你必须在那里导入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 { }

Typescript相关问答推荐

如何在TypScript中使参数类型化但可选

通用默认值触发依赖通用约束变量的错误

使用FormArray在Angular中添加排序

在TypeScript中,除了映射类型之外还使用的`in`二进制运算符?

在配置对象上映射时,类型脚本不正确地推断函数参数

Next.js错误:不变:页面未生成

我可以为情态车使用棱角形的路由守卫吗?

如何在Angular 12中创建DisplayBlock组件?

TypeScrip界面属性依赖于以前的属性-针对多种可能情况的简明解决方案

Angular 15使用react 式表单在数组内部创建动态表单数组

有没有可能产生输出T,它在视觉上省略了T中的一些键?

从子类集合实例化类,同时保持对Typescript中静态成员的访问

为什么我的函数arg得到类型为Never?

在单独的组件中定义React Router路由

如何键入并类型的函数&S各属性

推断集合访问器类型

使用RXJS获取数据的3种不同REST API

窄SomeType与SomeType[]

TypeScript:方法获胜';t接受较窄类型作为参数

可选通用映射器函数出错