javascript - NG0301：未找到名称“ngModel”的导出

Question

在下面的代码中，我想执行反应式表单验证。所以我提到了一些问题和教程，例如这个：

https://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example

尽管我正确地遵循了这些步骤，但是当我运行应用程序时，我收到以下错误

NG0301: Export of name 'ngModel' not found!

如下所示修改了相应的规范文件，并将所需的导入添加到 app.module.ts。请查看下面发布的代码和文件，让我知道如何修复此错误

html代码：

<div class="modal-body">
            <form [formGroup]="distanceMeasuremrntForm" (ngSubmit)="measureDistanceForCoordinates()" #form="ngForm" class="clr-form  clr-form-horizontal" autocomplete="off">
                <clr-input-container>
                    <label >{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}:</label>
                    <input
                        id="startLngTextId"
                        required
                        maxlength="25"
                        clrInput
                        type="text"
                        name="name1"
                        [(ngModel)]=iMeasureDistanceParametersPasser.startLongitude
                        #name1="ngModel"
                        formControlName="startLngControlName"
                        [ngClass]="{ 'is-invalid': submitted && f.startLngControlName.errors }"
                    />
                    <div *ngIf="submitted && f.startLngControlName.errors" class="invalid-startLng">
                        <div *ngIf="f.startLngControlName.errors.required">First Name is required</div>
                    </div>
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.START_LATITUDE" | translate }}:</label>
                        <input
                            id="startLatTextId"
                            required
                            maxlength="25" 
                            clrInput
                            type="text"
                            name="name2"
                            [(ngModel)]=iMeasureDistanceParametersPasser.startLatitude
                            #name2="ngModel"
                            formControlName="startatControlName"
                            [ngClass]="{ 'is-invalid': submitted && f.startatControlName.errors }"
                        />
                        <div *ngIf="submitted && f.startatControlName.errors" class="invalid-startLat">
                            <div *ngIf="f.startatControlName.errors.required">First Name is required</div>
                        </div>
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.END_LONGITUDE" | translate }}:</label>
                        <input
                            id="endLngTextId"
                            required
                            maxlength="25"
                            clrInput
                            type="text"
                            name="name3"
                            [(ngModel)]=iMeasureDistanceParametersPasser.endLongitude
                            #name3="ngModel"
                            formControlName="endLngControlName"
                            [ngClass]="{ 'is-invalid': submitted && f.endLngControlName.errors }"
                        /> 
                        <div *ngIf="submitted && f.endLngControlName.errors" class="invalid-endLng">
                            <div *ngIf="f.endLngControlName.errors.required">First Name is required</div>
                        </div>
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.END_LATITUDE" | translate }}:</label>
                        <input
                            id="endLatTextId"
                            required
                            maxlength="25" 
                            clrInput
                            type="text"
                            name="name4"
                            [(ngModel)]=iMeasureDistanceParametersPasser.endLatitude
                            #name4="ngModel"
                            formControlName="endLatControlName"
                            [ngClass]="{ 'is-invalid': submitted && f.endLatControlName.errors }"
                        />
                        <div *ngIf="submitted && f.endLatControlName.errors" class="invalid-endLat">
                            <div *ngIf="f.endLatControlName.errors.required">First Name is required</div>
                        </div>
                </clr-input-container>
                <div>
                    <button
                        class="btn btn-primary"
                        type="button"
                    >
                    {{ "DISTANCE_MEASUREMENT.ENTRY_LABEL" | translate }}
                    </button>
                </div>
                <div>
                    <button
                        class="btn btn-primary"
                        type="button"
                        (click)="clearInputs()"                     
                    >
                    {{ "COMMON.CLEAR_DATA" | translate }}
                    </button>
                </div>
                <div>
                    <label *ngIf=showMeasuredDistance>
                        {{ "DISTANCE_MEASUREMENT.DISTANCE" | translate }} 
                        {{ "DISTANCE_MEASUREMENT.EQUAL" | translate }} 
                        {{ mMeasuredDistanceInKM }} 
                        {{ "DISTANCE_MEASUREMENT.UNIT_KM"  | translate }}
                    </label>
                </div>
                    
            </form>
            <div class="modal-footer">
                <button
                    class="btn btn-outline"
                    type="button"
                    (click)="hideWindowOverlay()"
                >
                {{ "COMMON.CANCEL" | translate }}
                </button> 
            </div>
        </div>
        

规格文件：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { DistanceMeasurmentParametersComponent } from './distance-measurment-parameters.component';

describe('DistanceMeasurmentParametersComponent', () => {
  let component: DistanceMeasurmentParametersComponent;
  let fixture: ComponentFixture<DistanceMeasurmentParametersComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports:[FormsModule],
      declarations: [ DistanceMeasurmentParametersComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(DistanceMeasurmentParametersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

应用模块

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
@NgModule({
    declarations: [
    ...
    ...
    ],
    imports: [
    BrowserModule,
    HotTableModule.forRoot(),
    FormsModule,//<-impored
    .....,
    .....,
    ReactiveFormsModule,   
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
    ],
    providers: [
    {
        provide: LocationStrategy, 
        useClass: HashLocationStrategy
    },
    {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptor,
        multi: true
    },
    {
        provide: HTTP_INTERCEPTORS,
        useClass: LoadingScreenInterceptor,
        multi: true
    }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');// für http://192.168.211.39/synops-2
    //return new TranslateHttpLoader(http);
}