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

Question

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

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

Answer 1

关注

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

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

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

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

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

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

解决方案：Angular反应形式

对于 Reactive 形式，您应该从 FormControl 中删除 [(ngModel)]，因为它是 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

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

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

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

angular

angular-reactive-forms

angular2-ngmodel

关注

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

解决方案：Angular反应形式