我的组件中有一个简单的输入,它使用[(ngModel)]:

<input type="text" [(ngModel)]="test" placeholder="foo" />

当我启动应用程序时,即使没有显示组件,也会出现以下错误。

zone.js:461未处理的Promise拒绝:模板解析错误:无法绑定到“ngModel”,因为它不是“input”的已知属性。

以下是组件。ts:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})
    
export class InterventionDetails
{
   @Input() intervention: Intervention;
    
   public test : string = "toto";
}

当前回答

如果在应用接受的解决方案后仍有人出现错误,可能是因为您有一个单独的模块文件用于要在其中使用输入标记中的ngModel属性的组件。在这种情况下,也可以在组件的module.ts文件中应用接受的解决方案。

其他回答

实际上,在大多数情况下,FormsModule已经导入。所以你要做的是确保

组件已正确添加到app.module.ts文件的声明数组中。您应该验证绑定是否拼写正确。正确拼写为[(ngModel)]

如果在应用接受的解决方案后仍有人出现错误,可能是因为您有一个单独的模块文件用于要在其中使用输入标记中的ngModel属性的组件。在这种情况下,也可以在组件的module.ts文件中应用接受的解决方案。

要在Angular 2、4和5+中使用[(ngModel)],需要从Angular表单导入FormsModule。。。

此外,它位于GitHub上Angular存储库中表单下的路径中:

angular/packages/forms/src/directives/ng_model.ts

对于AngularJS开发人员来说,这可能不是一件很愉快的事情,因为您可以在任何时候在任何地方使用ng模型,但是当Angular尝试分离模块以使用您当时想要使用的任何东西时,ngModel现在在FormsModule中。

此外,如果您使用的是ReactiveFormsModule,则也需要导入它。

因此,只需查找app.module.ts并确保导入了FormsModule。。。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  // <<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule // <<<< And here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

此外,以下是FormsModule中Angular4 ngModel的当前开始注释:

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

如果您想使用输入,而不是表单,可以将其与ngModelOptions一起使用,并使其独立为true。。。

[ngModelOptions]="{standalone: true}"

有关更多信息,请查看此处Angular部分中的ng_model。

简单解决方案:在文件app.module.ts中-

示例1

import {FormsModule} from "@angular/forms";
// Add in imports

imports: [
 BrowserModule,
 FormsModule
 ],

示例2

如果要使用[(ngModel)],则必须在app.module.ts中导入FormsModule:

import { FormsModule  } from "@angular/forms";
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective,
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

虽然答案解决了这个问题,但我想提供更多关于这个主题的信息,因为我在开始从事Angular项目时也遇到过这个问题。

初学者应该理解有两种主要形式。它们是反应形式和模板驱动形式。从Angular 2开始,建议对任何类型的表单使用Reactive表单。

反应式表单更健壮:它们更具可扩展性、可重用性和可测试性。如果表单是应用程序的关键部分,或者您已经在使用反应式模式构建应用程序,请使用反应式表单。

模板驱动的表单对于向应用程序添加简单表单(如电子邮件列表注册表单)非常有用。它们很容易添加到应用程序中,但扩展性不如反应式表单。如果您有非常基本的表单需求和逻辑,可以在模板中单独管理,请使用模板驱动的表单。

有关详细信息,请参阅Angular文档。

说到问题,[(ngModel)]=“…”基本上是一种绑定语法。为了在组件HTML页面中使用它,您应该在NgModule(组件所在的位置)中导入FormsModule。现在[(ngModel)]用于简单的双向绑定,或者在表单中用于任何输入HTML元素。

另一方面,要使用反应式表单,请从@angular/forms包中导入ReactiveFormsModule,并将其添加到NgModule的imports数组中。

例如,如果我的组件HTML内容在任何HTML元素中都没有[(ngmodel)],那么我就不需要导入FormsModule。

在下面的示例中,我完全使用了Reactive Forms,因此我不需要在NgModule中使用FormsModule。

创建组模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupsRoutingModule, routedAccountComponents } from './groups-routing.module';
import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
    declarations: [
        routedAccountComponents
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        GroupsRoutingModule,
        SharedModule,
        ModalModule.forRoot()
    ]
})
export class GroupsModule {
}

创建路由模块(为了可读性和代码主体分开):


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GroupsComponent } from './all/index.component';
import { CreateGroupComponent } from './create/index.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'groups',
    pathMatch: 'full'
  },
  {
    path: 'groups',
    component: GroupsComponent
  }
];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GroupsRoutingModule { }


export const routedAccountComponents = [
  GroupsComponent,
  CreateGroupComponent
];

CreateGroupComponent html代码

<form [formGroup]="form" (ngSubmit)="onSubmit()">
        <label for="name">Group Name</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" formControlName="name" class="form-control">
            </div>
        </div>
    </form>

CreateGroupComponent ts文件


import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DialogResult } from 'src/app/shared/modal';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { validateAllFormFields } from 'src/app/services/validateAllFormFields';
import { HttpErrorResponse } from '@angular/common/http';
import { modelStateFormMapper } from 'src/app/services/shared/modelStateFormMapper';
import { GroupsService } from '../groups.service';
import { CreateGroup } from '../model/create-group.model';

@Component({
    selector: 'app-create-group',
    templateUrl: './index.component.html',
    providers: [LoadingService]
})

export class CreateGroupComponent implements OnInit {
    public form: FormGroup;
    public errors: string[] = [];
    private destroy: Subject<void> = new Subject<void>();

    constructor(
        private groupService: GroupsService,
        private toastr: ToastrService
    ) { }

    private buildForm(): FormGroup {
        return new FormGroup({
            name: new FormControl('', [Validators.maxLength(254)])
        });
    }

    private getModel(): CreateGroup {
        const formValue = this.form.value;
        return <CreateGroup>{
            name: formValue.name
        };
    }

    public control(name: string): AbstractControl {
        return this.form.get(name);
    }

    public ngOnInit() {
        this.form = this.buildForm();
    }


    public onSubmit(): void {

         if (this.form.valid) {
             // this.onSubmit();
             //do what you need to do
         }
    }
}

我希望这有助于开发人员理解为什么以及何时需要使用FormsModule。