So I'm trying to add a simple validation message.
App.Module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
...
imports: [ FormsModule, ReactiveFormsModule, ]
})
HTML
<div class="form-group">
<label>Nickname</label>
<input type="text" class="form-control"
id="nickname" formControlName="nickname"
[(ngModel)]="MyProfileForm.nickname" name="nickname" #nickname="ngModel">
<div [hidden]="nickname.valid" class="alert alert-danger">Nickname is required.</div>
</div>
.ts
import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, NgModel } from "@angular/forms";
export class MyProfileComponent
{
constructor(private fbdr: FormBuilder) { }
People = ...;
MyProfileForm: FormGroup;
this.MyProfileForm = this.fbdr.group
(
{
nickname: new FormControl(this.People.selfnickname, [Validators.required, Validators.minLength(4)])
}
);
}
I've tried all answers of this SO.
Full stack from console:
core.js:6210 ERROR Error: Uncaught (in promise): Error: NG0301: Export of name 'ngModel' not found!. Find more at https://angular.io/errors/NG0301 Error: NG0301: Export of name 'ngModel' not found!. Find more at https://angular.io/errors/NG0301 at cacheMatchingLocalNames (core.js:10393) at resolveDirectives (core.js:10224) at elementStartFirstCreatePass (core.js:14786) at ɵɵelementStart (core.js:14823) at MyProfileComponent_Template (template.html:21) at executeTemplate (core.js:9614) at renderView (core.js:9418) at renderComponent (core.js:10698) at renderChildComponents (core.js:9283) at renderView (core.js:9443) at resolvePromise (zone.js:1209) at resolvePromise (zone.js:1163) at zone.js:1275 at ZoneDelegate.invokeTask (zone.js:402) at Object.onInvokeTask (core.js:28578) at ZoneDelegate.invokeTask (zone.js:401) at Zone.runTask (zone.js:174) at drainMicroTaskQueue (zone.js:578) at ZoneTask.invokeTask [as invoke] (zone.js:487) at invokeTask (zone.js:1596)
There are some issues in your attached code that make the project unable to compile. Be sure you review and provide a Minimal, Reproducible Example.
For Template Driven Form, you need to remove formControlName
from input
element.
Meanwhile, found out that you miss out required
attribute in the input
element that leads to the error message unable to be displayed.
And remove all related Reactive Form code if you prefer for Template Driven Form.
my-profile.component.html
<input type="text" class="form-control"
id="nickname" [(ngModel)]="People.selfnickname" name="nickname" #nickname="ngModel"
required>
<div [hidden]="nickname.valid" class="alert alert-danger">Nickname is required.</div>
Solution: Angular Template Driven Form on StackBlitz
For the Reactive form, you should remove [(ngModel)]
from FormControl
as it is deprecated.
my-profile.component.html
<form [formGroup]="MyProfileForm">
<div class="form-group">
<label>Nickname</label>
<input type="text" class="form-control"
id="nickname" formControlName="nickname"
name="nickname">
<div [hidden]="MyProfileForm.controls['nickname']?.valid" class="alert alert-danger">Nickname is required.</div>
</div>
</form>
my-profile.component.ts
export class MyProfileComponent implements OnInit {
MyProfileForm!: FormGroup;
People: { selfnickname: string } = {
selfnickname: ''
};
constructor(private fbdr: FormBuilder) {}
ngOnInit() {
this.MyProfileForm = this.fbdr.group({
nickname: new FormControl(this.People.selfnickname, [
Validators.required,
Validators.minLength(4)
])
});
}
}
Solution: Angular Reactive Form on StackBlitz
Would suggest Angular Reactive Form documentation as a great resource for you can to follow the instructions and guidelines while creating your form.