NG8002：无法绑定到“ngModel”，因为它不是“输入”的已知属性。角 10

Question

我试图弄清楚为什么会出现此错误。到目前为止阅读一堆答案有两个可能的原因。缺少 FormsModule 导入或 [(ngModel)] 的语法。仍然找不到我做错了什么。

Angular 版本以防万一：

角度：10.0.4 ... 动画、通用、编译器、编译器-cli、核心、表单 ...本地化，平台浏览器，平台浏览器动态，路由器 常春藤工作区：是的

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.3
@angular-devkit/build-angular     0.1000.3
@angular-devkit/build-optimizer   0.1000.3
@angular-devkit/build-webpack     0.1000.3
@angular-devkit/core              10.0.3
@angular-devkit/schematics        10.0.3
@angular/cli                      10.0.3
@ngtools/webpack                  10.0.3
@schematics/angular               10.0.3
@schematics/update                0.1000.3
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

错误：

     src/app/business-info/business-info.component.ts:12:16
    12   templateUrl: './business-info.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BusinessInfoComponent.
src/app/business-info/business-info.component.html:497:94 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

497           <input class="form-check-input" type="checkbox" id="terms" formControlName="terms" [(ngModel)]="termsAccept">

Component.html 中的一行：

<input id="frente" type="file" class="form-control input-file-height" formControlName="frente" [(ngModel)]="file"
      (change)="onFileChange($event)" accept="image/png, image/jpeg"/>

App.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injectable } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ChangeStatusPipe } from './change-status.pipe';
import { EqualValidatorDirective } from './equal-validator.directive';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BasicLevelFormComponent } from './basic-level-form/basic-level-form.component';

import { UserService } from './user.service';
import { MessageService } from './message.service';
import { UtilService } from './util/util.service';

import {ForbiddenValidatorDirective} from './shared/forbidden-value-select.directive';
import {AForbiddenValidatorDirective} from './shared/forbidden-number.directive';
import {BForbiddenValidatorDirective} from './shared/forbidden-name.directive';
import {CForbiddenValidatorDirective} from './shared/forbidden-email.directive';
import {DForbiddenValidatorDirective} from './shared/forbidden-password.directive';
import { BusinessInfoComponent } from './business-info/business-info.component';
import { ContactListComponent } from './contact-list/contact-list.component';
import { CreateRateComponent } from './create-rate/create-rate.component';
import { DashboardAdminComponent } from './dashboard-admin/dashboard-admin.component';
import { LoadOrderComponent } from './load-order/load-order.component';
import { LoginComponent } from './login/login.component';
import { LoginAdminComponent } from './login-admin/login-admin.component';
import { ManageOrderComponent } from './manage-order/manage-order.component';
import { ModalTerminosComponent } from './modal-terminos/modal-terminos.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ProcessOrderComponent } from './process-order/process-order.component';
import { RecoveryPasswordComponent } from './recovery-password/recovery-password.component';
import { RegisterFormComponent } from './register-form/register-form.component';
import { SearchOrdersComponent } from './search-orders/search-orders.component';
import { TransferComponent } from './transfer/transfer.component';
import { TypeUserComponent } from './type-user/type-user.component';
import { UserInfoComponent } from './user-info/user-info.component';
import { UserOrderComponent } from './user-order/user-order.component';
import { UserTransferComponent } from './user-transfer/user-transfer.component';
import { ValidateUserComponent } from './validate-user/validate-user.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ChangeStatusPipe,
    EqualValidatorDirective,
    DashboardComponent,
    BasicLevelFormComponent,
    ForbiddenValidatorDirective,
    BForbiddenValidatorDirective,
    AForbiddenValidatorDirective,
    CForbiddenValidatorDirective,
    DForbiddenValidatorDirective,
    BusinessInfoComponent,
    ContactListComponent,
    CreateRateComponent,
    DashboardAdminComponent,
    LoadOrderComponent,
    LoginComponent,
    LoginAdminComponent,
    ManageOrderComponent,
    ModalTerminosComponent,
    ProcessOrderComponent,
    RecoveryPasswordComponent,
    RegisterFormComponent,
    SearchOrdersComponent,
    TransferComponent,
    TypeUserComponent,
    UserInfoComponent,
    UserOrderComponent,
    UserTransferComponent,
    ValidateUserComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    NgbModule,
    HttpClientModule,
    Injectable,
  ],
  providers: [
    UserService,
    MessageService,
    UtilService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

有人知道我错过了什么吗？

Answer 1

在 App.module.ts 中

import { FormsModule } from '@angular/forms';

并在

中包含FormsModule

 imports: [
    ....
    FormsModule
]