错误：NG0301：未找到名称“ngModel”的导出

Posted 2023-02-18

【中文标题】错误：NG0301：未找到名称“ngModel”的导出

【英文标题】：Error: NG0301: Export of name 'ngModel' not found

【发布时间】：2021-10-04 16:28:30

【问题描述】：

所以我正在尝试添加一个简单的验证消息。

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)])
        
    );

我已经尝试了这个SO的所有答案。

来自控制台的完整堆栈：

core.js:6210 ERROR 错误：未捕获（承诺中）：错误：NG0301：导出 找不到名称“ngModel”的！更多信息请访问 https://angular.io/errors/NG0301 错误：NG0301：名称导出 'ngModel' 未找到！更多信息请访问https://angular.io/errors/NG0301 在 cacheMatchingLocalNames (core.js:10393) 在 resolveDirectives (core.js:10224) 在 elementStartFirstCreatePass (core.js:14786) 在 ɵɵelementStart (core.js:14823) 在 MyProfileComponent_Template (template.html:21) 在执行模板 (core.js:9614) 在渲染视图（core.js:9418） 在渲染组件（core.js:10698） 在 renderChildComponents (core.js:9283) 在渲染视图（core.js:9443） 在 resolvePromise (zone.js:1209) 在 resolvePromise (zone.js:1163) 在 zone.js:1275 在 ZoneDelegate.invokeTask (zone.js:402) 在 Object.onInvokeTask (core.js:28578) 在 ZoneDelegate.invokeTask (zone.js:401) 在 Zone.runTask (zone.js:174) 在 drainMicroTaskQueue (zone.js:578) 在 ZoneTask.invokeTask [作为调用] (zone.js:487) 在调用任务（zone.js:1596）

【问题讨论】：

这些是您在app.module.ts 中唯一的导入吗？只是 FormsModule 和 ReactiveFormsModule？

您应该从 FormControl 中删除 [(ngModel)]，因为它是 deprecated。我建议您尝试在 StackBlitz 上创建 Minimal, Reproducible Example，因为您附加的代码不可编译。

@YongShun 我在看这个Angular document, No. 4

@Andres2142 还有很多其他的包。

嗨@Jeb50，我认为如果您遵循附加的文档，您必须删除 formControlName 和 Reactive Form。或者，如果要应用 Reactive Form，则需要删除 [(ngModel)] 和 ngModel 指令。

【参考方案1】：

关注

您附加的代码中有一些问题导致项目无法编译。请务必查看并provide a Minimal, Reproducible Example。

---

解决方案：Angular 模板驱动表单

对于模板驱动表单，您需要从input 元素中删除formControlName。

同时，发现您错过了input元素中的required属性，导致错误信息无法显示。

如果您更喜欢模板驱动表单，请删除所有相关的响应式表单代码。

我的-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

---

解决方案：Angular Reactive Form

对于响应式表单，您应该从 FormControl 中删除 [(ngModel)]，因为它是 deprecated。

我的-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

建议您将Angular Reactive Form documentation 作为一个很好的资源，以便您在创建表单时遵循说明和指南。

【讨论】：

感谢您提供详细的信息和精彩的演示！