Error: NG0301: Export of name 'ngModel' not found

Question

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)

Are those the only one imports you have in your `app.module.ts`? just FormsModule and ReactiveFormsModule? — Andres2142, Jul 29 '21 at 00:52
You should remove `[(ngModel)]` from FormControl as it is [deprecated](https://angular.io/api/forms/FormControlName#use-with-ngmodel-is-deprecated). And I would recommend you try to create Minimal, Reproducible Example on [StackBlitz](https://stackblitz.com) as your attached code is not compilable. — Yong Shun, Jul 29 '21 at 01:12
@YongShun I was looking at this [Angular document, No. 4](https://angular.io/guide/forms#show-and-hide-validation-error-messages) — Jeb50, Jul 29 '21 at 02:54
Hi @Jeb50, I think you have to remove formControlName and Reactive Form if you follow the documentation you attached. Alternative, if you want to apply Reactive Form, you need to remove `[(ngModel)]` and ngModel directive. — Yong Shun, Jul 29 '21 at 03:00

score 2 · Accepted Answer · answered Jul 29 '21 at 03:32

Concern

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.

Solution: Angular Template Driven Form

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

Solution: Angular Reactive Form

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.

Thank you for the detailed info and terrific demos! – Jeb50 Jul 29 '21 at 17:03 — Jeb50, Jul 29 '21 at 17:03

Error: NG0301: Export of name 'ngModel' not found

1 Answers1

Concern

Solution: Angular Template Driven Form

Solution: Angular Reactive Form