javascript - 没有将 “exportAs” 设置为 “ngForm” 的指令到

转载 作者：行者123 更新时间：2023-11-30 20:31:41 28 4

我正在 Angular 中测试模板驱动的表单。但它给了我这个错误**没有将“exportAs”设置为“ngForm”的指令**我在 app.module.ts 和我的 ....module.ts 中导入了 FormsModule 和 ReactiveFormsModule，这是文件夹内的另一个子模块，我想使用以下行测试的文件:

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

还有这个:

@NgModule({
    imports: [
        BrowserModule,
        OncosupAppRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        OncosupSharedModule,
        OncosupHomeModule,
        OncosupAdminModule,
        OncosupAccountModule,
        OncosupEntityModule,
        FormsModule,
        ReactiveFormsModule,
    ],

我的表格是这样开始的:

<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

然后如果您需要更多信息，错误将继续如下所示。

        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("p
aciente.hospitalId" >
                        <option [ngValue]="null"></option>
                        <option [ERROR ->][ngValue]="hospitalOption.id" *ngFor="
let hospitalOption of hospitals; trackBy: trackHospitalById">{{"): ng:///Dynamic
TestModule/PacienteDialogComponent.html@188:24
        Error: Template parse errors:
            at syntaxError (webpack:///node_modules/@angular/compiler/esm5/compi
ler.js:485:21 <- spec/entry.ts:63150:34)
            at TemplateParser.parse (webpack:///node_modules/@angular/compiler/e
sm5/compiler.js:24661:0 <- spec/entry.ts:87326:19)
            at JitCompiler._parseTemplate (webpack:///node_modules/@angular/comp
iler/esm5/compiler.js:34601:0 <- spec/entry.ts:97266:37)
            at JitCompiler._compileTemplate (webpack:///node_modules/@angular/co
mpiler/esm5/compiler.js:34576:0 <- spec/entry.ts:97241:23)
            at webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:
47 <- spec/entry.ts:97142:62
            at Set.forEach (<anonymous>)
            at JitCompiler._compileComponents (webpack:///node_modules/@angular/
compiler/esm5/compiler.js:34477:0 <- spec/entry.ts:97142:19)
            at webpack:///node_modules/@angular/compiler/esm5/compiler.js:34365:
0 <- spec/entry.ts:97030:19
            at Object.then (webpack:///node_modules/@angular/compiler/esm5/compi
ler.js:474:32 <- spec/entry.ts:63139:77)
            at JitCompiler._compileModuleAndAllComponents (webpack:///node_modul
es/@angular/compiler/esm5/compiler.js:34363:0 <- spec/entry.ts:97028:26)
        Error: Template parse errors:
        There is no directive with "exportAs" set to "ngForm" ("<form name="edit
Form" role="form" novalidate (ngSubmit)="save()" [ERROR ->]#editForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="myPacienteLa"): ng:///DynamicTestMod
ule/PacienteDialogComponent.html@0:65
        'jhi-alert-error' is not a known element:
        1. If 'jhi-alert-error' is an Angular component, then verify that it is
part of this module.
        2. If 'jhi-alert-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCH
EMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            </div>
            <div class="modal-body">
                [ERROR ->]<jhi-alert-error></jhi-alert-error>
                <div class="half-block">
                        <div class="form-grou"): ng:///DynamicTestModule/Pacient
eDialogComponent.html@7:8
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <input type="text" class="form-control" name="nombre" id="field_nombre"
                                [ERROR ->][(ngModel)]="paciente.nombre" required
/>
                            <div [hidden]="!(editForm.controls.nombre?.dir"): ng
:///DynamicTestModule/PacienteDialogComponent.html@12:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
  <input type="text" class="form-control" name="apellidos" id="field_apellidos"
                                [ERROR ->][(ngModel)]="paciente.apellidos" requi
red/>
                            <div [hidden]="!(editForm.controls.apellido"): ng://
/DynamicTestModule/PacienteDialogComponent.html@24:17
        There is no directive with "exportAs" set to "ngbDatepicker" ("t id="fie
ld_fechaNacimiento" type="text" class="form-control" name="fechaNacimiento" ngbD
atepicker  [ERROR ->]#fechaNacimientoDp="ngbDatepicker" [(ngModel)]="paciente.fe
chaNacimiento"
                                required/"): ng:///DynamicTestModule/PacienteDia
logComponent.html@38:122
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("te
xt" class="form-control" name="fechaNacimiento" ngbDatepicker  #fechaNacimientoD
p="ngbDatepicker" [ERROR ->][(ngModel)]="paciente.fechaNacimiento"
                                required/>
                                <span class="in"): ng:///DynamicTestModule/Pacie
nteDialogComponent.html@38:157
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("p
aciente.sexo" for="field_sexo">Sexo</label>
                            <select class="form-control" name="sexo" [ERROR ->][
(ngModel)]="paciente.sexo" id="field_sexo"  required>
                                <option value="VARON">{{'onc"): ng:///DynamicTes
tModule/PacienteDialogComponent.html@53:54
        The pipe 'translate' could not be found ("o" [(ngModel)]="paciente.sexo"
 id="field_sexo"  required>
                                <option value="VARON">{{[ERROR ->]'oncosupApp.Se
xo.VARON' | translate}}</option>
                                <option value="MUJER">{{'oncosupApp."): ng:///Dy
namicTestModule/PacienteDialogComponent.html@54:41
        The pipe 'translate' could not be found ("="VARON">{{'oncosupApp.Sexo.VA
RON' | translate}}</option>
                                <option value="MUJER">{{[ERROR ->]'oncosupApp.Se
xo.MUJER' | translate}}</option>
                            </select>
                            <div [hidden]="!"): ng:///DynamicTestModule/Paciente
DialogComponent.html@55:41
        Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
                            <input type="text" class="form-control" name="nhc" i
d="field_nhc"
                                [ERROR ->][(ngModel)]="paciente.nhc" maxlength="
38" pattern="[0-9]+"/>
                            <div [hidden]="!(editForm."): ng:///DynamicTestModul
e/PacienteDialogComponent.html@70:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
                            <input type="text" class="form-control" name="nss" i
d="field_nss"
                                [ERROR ->][(ngModel)]="paciente.nss" maxlength="
20"/>
                            <div [hidden]="!(editForm.controls.nss?.dir"): ng://
/DynamicTestModule/PacienteDialogComponent.html@85:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e=
"text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria"
                                [ERROR ->][(ngModel)]="paciente.tarjetaSanitaria
" maxlength="20"/>
                            <div [hidden]="!(editForm.cont"): ng:///DynamicTestM
odule/PacienteDialogComponent.html@99:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                            <input type="text" class="form-control" name="cipa"
id="field_cipa"
                                [ERROR ->][(ngModel)]="paciente.cipa" maxlength=
"20"/>
                            <div [hidden]="!(editForm.controls.cipa?.d"): ng:///
DynamicTestModule/PacienteDialogComponent.html@110:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
    <input type="text" class="form-control" name="telefono" id="field_telefono"
                                [ERROR ->][(ngModel)]="paciente.telefono" />
                        </div>
                        <div class="form-group half-item">
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@125:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("-z
A-Z0-9-]+(\.[a-zA-Z0-9-]+)*" class="form-control" name="email" id="field_email"
                                [ERROR ->][(ngModel)]="paciente.email" />
                        </div>
                </div>
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@130:17
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("d
</label>
                        <select class="form-control" id="field_nacionalidad" nam
e="nacionalidad" [ERROR ->][(ngModel)]="paciente.nacionalidadId" >
                            <option [ngValue]="null"></option>
            "): ng:///DynamicTestModule/PacienteDialogComponent.html@137:89
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("i
onalidad" name="nacionalidad" [(ngModel)]="paciente.nacionalidadId" >
                            <option [ERROR ->][ngValue]="null"></option>
                            <option [ngValue]="nacionalidadOption.id" *ngFor="le
t"): ng:///DynamicTestModule/PacienteDialogComponent.html@138:28
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("i
onalidadId" >
                            <option [ngValue]="null"></option>
                            <option [ERROR ->][ngValue]="nacionalidadOption.id"
*ngFor="let nacionalidadOption of nacionalidads; trackBy: trackNaci"): ng:///Dyn
amicTestModule/PacienteDialogComponent.html@139:28
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("f
ield_etnia">Etnia</label>
                            <select class="form-control" id="field_etnia" name="
etnia" [ERROR ->][(ngModel)]="paciente.etniaId" >
                                <option [ngValue]="null"></option>
                             "): ng:///DynamicTestModule/PacienteDialogComponent
.html@144:72
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("m
-control" id="field_etnia" name="etnia" [(ngModel)]="paciente.etniaId" >
                                <option [ERROR ->][ngValue]="null"></option>
                                <option [ngValue]="etniaOption.id" *ngFor="let e
tniaOpti"): ng:///DynamicTestModule/PacienteDialogComponent.html@145:25
        Can't bind to 'ngValue' since it isn't a known property of 'option'. (""
paciente.etniaId" >
                                <option [ngValue]="null"></option>
                                <option [ERROR ->][ngValue]="etniaOption.id" *ng
For="let etniaOption of etnias; trackBy: trackEtniaById">{{etniaOption."): ng://
/DynamicTestModule/PacienteDialogComponent.html@146:25
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("l
d_comunidadActual" name="comunidadActual" (change)="onComunidadActual(paciente.c
omunidadActualId)" [ERROR ->][(ngModel)]="paciente.comunidadActualId" >
                                <option [ngValue]="null"></option>
                   "): ng:///DynamicTestModule/PacienteDialogComponent.html@155:
149
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("l
(paciente.comunidadActualId)" [(ngModel)]="paciente.comunidadActualId" >
                                <option [ERROR ->][ngValue]="null"></option>
                                <option [ngValue]="comunidadAutonomaOption.id" *
ngFor="l"): ng:///DynamicTestModule/PacienteDialogComponent.html@156:25
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("c
omunidadActualId" >
                                <option [ngValue]="null"></option>
                                <option [ERROR ->][ngValue]="comunidadAutonomaOp
tion.id" *ngFor="let comunidadAutonomaOption of comunidadesAutonomas; t"): ng://
/DynamicTestModule/PacienteDialogComponent.html@157:25
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("l
abel>
                            <select class="form-control" id="field_provinciaActu
al" name="provinciaActual" [ERROR ->][(ngModel)]="paciente.provinciaActualId" >
                                <option [ngValue]="null"></option>
                   "): ng:///DynamicTestModule/PacienteDialogComponent.html@162:
92
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("A
ctual" name="provinciaActual" [(ngModel)]="paciente.provinciaActualId" >
                                <option [ERROR ->][ngValue]="null"></option>
                                <option [ngValue]="provinciaPaisOption.id" *ngFo
r="let p"): ng:///DynamicTestModule/PacienteDialogComponent.html@163:25
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("p
rovinciaActualId" >
                                <option [ngValue]="null"></option>
                                <option [ERROR ->][ngValue]="provinciaPaisOption
.id" *ngFor="let provinciaPaisOption of provinciasPaisActual; trackBy: "): ng://
/DynamicTestModule/PacienteDialogComponent.html@164:25
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("i
co" name="comunidadDiagnostico" (change)="onComunidadDiagnostico(paciente.comuni
dadDiagnosticoId)" [ERROR ->][(ngModel)]="paciente.comunidadDiagnosticoId" >
                            <option [ngValue]="null"></optio"): ng:///DynamicTes
tModule/PacienteDialogComponent.html@171:172
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("m
unidadDiagnosticoId)" [(ngModel)]="paciente.comunidadDiagnosticoId" >
                            <option [ERROR ->][ngValue]="null"></option>
                            <option [ngValue]="comunidadAutonomaOption.id" *ngFo
r"): ng:///DynamicTestModule/PacienteDialogComponent.html@172:28
        Can't bind to 'ngValue' since it isn't a known property of 'option'. ("a
gnosticoId" >
                            <option [ngValue]="null"></option>
                            <option [ERROR ->][ngValue]="comunidadAutonomaOption
.id" *ngFor="let comunidadAutonomaOption of comunidadesAutonomas; t"): ng:///Dyn
amicTestModule/PacienteDialogComponent.html@173:28
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("
          <select class="form-control" id="field_provinciaDiagnostico" name="pro
vinciaDiagnostico" [ERROR ->][(ngModel)]="paciente.provinciaDiagnosticoId" >
                            <option [ngValue]="null"></optio"): ng:///DynamicTes
tModule/PacienteDialogComponent.html@178:105
        Can't bind to 'ngValue' since it isn't a known property of 'option'. (""
provinciaDiagnostico" [(ngModel)]="paciente.provinciaDiagnosticoId" >
                            <option [ERROR ->][ngValue]="null"></option>
                            <option [ngValue]="provinciaPaisOption.id" *ngFor="l
e"): ng:///DynamicTestModule/PacienteDialogComponent.html@179:28

还有什么我应该知道的吗？

最佳答案

在输入字段..

如果你有 [(ngModel)]="aaa"，你应该有 name="aaa"

ngModel 和 name 必须具有相同的值..

关于javascript - 没有将 “exportAs” 设置为 “ngForm” 的指令到 <form name=，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50277244/

28 4 0

• Angular 2 - 表单 - 通过 NgForm 对象将 NgForm .submitted 设置为 true

  在 Angular 1 (1.5) 中，表单 Controller 有一个 $setSubmitted()允许您以编程方式设置 .$submitted 的方法标记为真。 如何通过 NgForm 对象在

• angular - 找不到名称 'Ngform'

  我是 Angular 的新手，我正在使用模板驱动的表单。当我使用 NgForm 时，它抛出错误: src/app/pages/add-booking/servicing/servicing.compo

• angular - 找不到名称 'Ngform'

  我是 Angular 的新手，我正在使用模板驱动的表单。当我使用 NgForm 时，它抛出错误: src/app/pages/add-booking/servicing/servicing.compo

• 具有两个组件的 Angular NgForm

  我正在尝试制作一个包含两个不同组件的表单。一位家长和一位 child 。我查看了很多教程，他们都在谈论提供服务。 不过，我在这个website上找到了一个方法.它包括在子组件中添加以下内容: view

• forms - 表单提供者 ngForm

  我遇到了以下问题。我想使用 NG2 Forms。根据 Angular 2 文档，在表单上使用 ngForm 指令并在输入上使用 ngControl 指令，表单应该始终能够访问输入的有效性。 如果输入与

• angular - 为什么我无法从 NgForm 获得表单控制

  我有简单的形式 Is required lol 和组件作为 export class InputOverviewExample { comm

• javascript - React 版本的 ngForm

  我最近一直在使用 React，并且非常喜欢它，但我错过了一些我在其他框架中习惯的东西。 ngForm 中主要的一个来自 Angular，Angular 使用它来提供非常简单的表单验证。检查表单是否有效

• angular - 更改 ngForm 字段值

  当我提交表单时，我有这个功能 login(form: NgForm) 如果我尝试以下操作 console.log(form.value.password); // this works perfect

• javascript - 在 ngForm 中使用时未定义选择列表

  我是 Angular 初学者，我正在尝试打印在控制台中选择的表单元素的值。所有其他元素都已打印，但 select 选定列表元素显示 undefined。这是我的代码category.services.

• javascript - AngularJS 对动态生成的输入指令的表单验证不适用于 ngForm

  我正在尝试验证使用指令生成的动态表单输入并隔离范围。在指令之外，我有主窗体，在 ng-repeat 内部，我尝试使用 ng-form，但它从未显示错误消息。最初我在 ng-repeat 上有 ng-f

• Angular:迭代 ngForm 控件？

  目标是当用户单击按钮转到下一页时，如果页面部分填写但无效，则阻止用户继续并显示错误指示符。 在模板驱动的表单中，我有几个容器元素使用 NgModelGroup 属性来表示表单中的“页面”。在我的组件中

• forms - Angular2 ngForm 不工作

  我正在尝试做一个登录表单组件，但我无法读取表单数据。 当我尝试在控制台上写入用户名时，'undefined' 写入。 一切看起来都很正常，但表单数据没有到达组件。 下面是html代码:

• forms - 访问父组件中的 angular ngform 状态

  这是父 HTML 这是子 HTML 我需要访问父组件中的子窗体状态 最佳答案 子模板: 子组件: export class Ch

• javascript - 一个组件中的 ngForm 给出表单值，其他组件中的相同代码给出未定义

  login 工作组件的html代码是这样的。 Regis

• angular - 从 NgForm 中检索 NgModel

  我想知道是否有任何方法可以检索从表单的 NgForm.controls 对象中提取的 FormControl 的 NgModel它属于哪个，或者直接从表单中检索 NgModel。 我有一个表单，在提交

• angular2 表单验证 : get an instance of ngForm

  如何在组件中引用“myform”？是否可以？一定要使用 formbuilder(我尽量避免使用它)吗？ Value 最佳答案 实际上还有另一种方法可以做到这一点。您可以使用

• Angular 4，没有 NgForm 的提供者

  这个问题在这里已经有了答案: Angular 4.4.0-4.4.2 production build throwing "No provider for NgForm!" error (2 个答案

• angular - ngForm 和 FormGroup 的区别

  我在 Angular 4 上处理表单，我不知道使用 NgForm 和 FormGroup 处理错误和输入验证器有什么区别。处理表格有什么大的不同吗？ 最佳答案 如果我没看错，您就会遇到模板驱动表单和响

• angular5 - 没有将 “exportAs” 设置为 “ngForm” 的指令

  我已经包含了 FormsModule 但它显示错误。 There is no directive with “exportAs” set to “ngForm” 我的 Login.component.

• angular6 - Angular 6 中带有选择框的 ngForm 简单示例

  Angular 6 表单验证简单示例。通过电子邮件验证和选择框(下拉)。ngForm 带有选择框的 Angular 6 简单示例 最佳答案 使用ngForm。将其导入您的 component.modu