【问题标题】:Angular Validation Error as 'ngClass' since it isn't a known property of 'div'. (角度验证错误为“ngClass”,因为它不是“div”的已知属性。 (
【发布时间】:2017-12-05 20:02:52
【问题描述】:

在这里,我为 EName 验证编写了一个小的验证属性,当我尝试 2 加载 Html 页面时,我收到错误为“ngClass”,因为它不是“div”的已知属性。 (

Component.ts

import { Component, OnInit } from "@angular/core"
import { Employee } from "../../../templates/employee/employee"
import { Validators, FormGroup, FormBuilder } from "@angular/forms"
@Component({
    selector: "customer-ui",
    templateUrl: "../../../templates/customer/customer.html"
})
export class JamComponent implements OnInit {
    EmpleoyeeForm: FormGroup;
    public constructor(private fb: FormBuilder) {}
    ngOnInit(): void {
        this.EmpleoyeeForm = this.fb.group({
            EmpName: ['', [Validators.required]]

        })
    }

HTML代码

<form class="form-horizontal" novalidate [formGroup]="EmpleoyeeForm">

    <fieldset>
        <div class="form-group" [ngClass]="{'has-error': (EmpleoyeeForm.get('EmpName').touched ||
                                                  EmpleoyeeForm.get('EmpName').dirty) &&
                                                    !EmpleoyeeForm.get('EmpName').valid }">

            <label for="name">Name</label>
            <input type="text" class="form-control" formControlName="EmpName" [(ngModel)]="EmpName" />

        </div>
    </fieldset>
</form>

【问题讨论】:

标签: angular angular2-forms


【解决方案1】:

确保组件已导入并添加到 app.module.ts 中的 declarations 数组中,如下所示:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { JamComponent } from './jam.component';

@NgModule({
  declarations: [
    AppComponent,
    JamComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

【讨论】:

    【解决方案2】:

    从 '@angular/common' 导入 { CommonModule };

    ...

    导入:[CommonModule],

    【讨论】:

      【解决方案3】:

      如果您已经拥有 CommonModule/BrowserModule 但它仍然无法正常工作,请确保您正确输入了属性。我有ngclass 而不是ngClass(注意'C')。

      【讨论】:

      • 是的,在我的情况下,我依赖 intellij 代码完成 ngc[tab] 并且它没有修复大小写(我认为它会)
      • 我不敢相信我在 SO 上找到了一个关于拼写错误的 10 票答案,我真的很感激它在那里,如果我没有找到它,我会在我的桌子上砸我的头...
      猜你喜欢
      • 2021-03-23
      • 1970-01-01
      • 2017-09-04
      • 1970-01-01
      • 2019-04-12
      • 2021-01-03
      • 2019-11-04
      相关资源
      最近更新 更多