Currently, I am facing an issue in my project where I am utilizing lazy loading. Specifically, within my registration module, I am attempting to utilize the [ngClass] directive to append an 'invalid' class when there are validation errors present on my registration form's formGroup. However, upon implementation of this directive on my form, an exception is thrown.
The error message reads: "Can't bind to 'ngClass' since it isn't a known property of 'input'"
Upon investigating the error, I have explored various solutions, such as adding 'directive: [NgStyle]' to the component. Unfortunately, this approach did not resolve the initial problem.
Below is the code snippet:
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']">
Your assistance with this matter would be greatly appreciated. Thank you for your help.