ngModel不工作(我导入的表单模块)
ngModel是Angular框架中的一个重要概念，用于在表单元素和组件中实现双向数据绑定。在使用ngModel时，需要导入FormsModule或ReactiveFormsModule模块。
FormsModule用于模板驱动表单，而ReactiveFormsModule用于响应式表单。
在导入FormsModule或ReactiveFormsModule后，ngModel指令就可以使用了。它可以应用于表单元素（如input、select、textarea等）或自定义组件。
ngModel的作用是实现表单元素与组件中数据属性之间的双向数据绑定。当表单元素的值发生变化时，组件中对应的属性也会更新；反之，当组件中的属性值发生变化时，表单元素的值也会更新。
优势：
- 简化开发：ngModel提供了一种便捷的方式来处理表单数据的双向绑定，减少了开发者的工作量。
- 提高用户体验：双向数据绑定使得用户输入的数据能够实时反映在应用中，提升了用户体验。
- 表单验证：ngModel结合其他表单验证指令（如required、minlength、maxlength等），可以方便地进行表单验证。
应用场景： ngModel可以广泛应用于各种表单场景，包括登录表单、注册表单、数据筛选等。
腾讯云相关产品和产品介绍链接地址：
- 云函数SCF：https://cloud.tencent.com/product/scf 腾讯云云函数（Serverless Cloud Function，简称SCF）是一种无服务器、事件驱动的计算服务，可以将传统的表单提交逻辑转化为云函数的处理逻辑，实现快速、可靠的数据处理。
- COS对象存储：https://cloud.tencent.com/product/cos 腾讯云对象存储（Cloud Object Storage，简称COS）是一种高可靠、低成本、高扩展性的云端对象存储服务，可用于存储表单提交的文件等数据。
- 云数据库CDB：https://cloud.tencent.com/product/cdb 腾讯云云数据库MySQL（Cloud Database for MySQL，简称CDB）是一种高性能、可靠的关系型数据库服务，可用于存储表单提交的数据。
以上是关于ngModel的概念、优势、应用场景以及腾讯云相关产品的介绍。希望对你有帮助！
相关·内容
我正在将我的ionic 2项目从beta 10升级到11，并修复了一些损坏的东西，但我遇到了一个我一直无法解决的表单问题
我的原始代码在beta 10中工作得很好(尽管有弃用警告)，表单代码示例：
<form [ngFormModel]="merchantForm" (ngSubmit)="onSubmit(merchantForm.value)">
<ion-item>
<ion-label>First name</ion-label>
<ion-input [ng
浏览 0提问于2016-09-08得票数 1
我试图弄清楚角度导入模块是如何实现的，我不知道为什么它不能从根加载表单模块。
...
@NgModule({
declarations: [AppComponent],
imports: [AppRoutingModule, BrowserModule, TabsModule.forRoot(), FormsModule],
providers: [ServersService],
bootstrap: [AppComponent],
})
export class AppModule {}
和AppRoutingModule
const routes: Routes = [
浏览 2提问于2020-09-29得票数 1
回答已采纳
我提交表单在Angularjs2.0使用下面的代码，但得到的错误，没有出口的指令设置为ngForm和ngModel，但我使用。下面是我的表格：
<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.
浏览 1提问于2017-04-14得票数 3
我已经研究了这段代码有一段时间了，我被困住了:我有一个表单，我绑定到一个组件模型，而[(ngModel)]绑定破坏了页面-页面不会呈现。我没有得到编译错误和运行时调试器错误，但是页面不会呈现。
在这个页面上，模型看起来工作得很好--我可以用{{todo.title}}看到模型的值，但是当我试图用(ngModel)="todo.title“将这个值绑定到一个表单控件时，应用程序就崩溃了。
表单如下：
<form name="form1" id="form1" novalidate>
<div class="form-gro
浏览 6提问于2016-08-29得票数 3
2回答
在我的Angular 6应用程序中，我有一个导入自定义模块的app.module.ts文件：
import { AppGuiModule } from './app-gui.module';
...
imports: [
AppGuiModule,
反过来，app-gui.module文件导入表单模块：
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
FormsModule,
ReactiveFormsModule,
我认为这足以使用[
浏览 0提问于2018-10-10得票数 2
回答已采纳
我有以下的角度app.component.ts文件
import {NgModule} from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
浏览 0提问于2020-09-30得票数 0
1回答
我已经运行了示例应用程序来学习角2。在我的示例应用程序中，[(ngModel)]不工作。但是，当我删除方括号(ngModel)时，屏幕正在加载，但是双向绑定不起作用。
我应该做些什么让[(ngModel)]发挥作用吗？
浏览 6提问于2017-05-16得票数 4
回答已采纳
我在我的应用程序中使用angular 2表单，我已经基于给定的链接创建了表单。
为了验证和使用forms，我设置了#name="id" #id="ngModel"和ngModel之类的值，这会抛出脚本错误。但是如果我将#id="ngModel"设置为#id="ngForm"，问题就解决了。但是对于我的例子，我必须将我的模型值设置为ngModel。
下面是我的html页面。
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<d
浏览 31提问于2016-08-03得票数 7
回答已采纳
我正在用角创建表单验证，并且得到了错误。
没有在exportAs 'ngModel‘中找到任何指令。
我的代码：
<form>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" id="name" name="name" required minlength="4"
浏览 0提问于2021-06-09得票数 0
我对Angular是个新手。尝试使用ng-model指令进行双向绑定 我试过两种方法 <!-- <input type="email" class="form-control" id="email" placeholder="EMAIL" ngModel name ="email"> -->
<input type="email" class="form-control" id="email" placeholder="
浏览 24提问于2021-01-15得票数 0
回答已采纳
4回答
在Ionic 4中，如何进行双向绑定。在Ionic 3中，我会做以下几件事：
<ion-item color="light"> <ion-input type="string" placeholder="Username" [(ngModel)]="username"></ion-input> </ion-item>
然而，在Ionic 4中，我得到了以下错误：
Can't bind to 'ngModel' since it isn't a know
浏览 1提问于2018-09-12得票数 6
回答已采纳
我似乎弄不明白，它根本就不起作用。
这是由Pascal Prekht编写的原始，它是对模板驱动表单的解释：
是我的分支，它是完全相同的，除了我试图将其中一个字段集作为单独的子组件加载。
代码如下：
@Component({
selector:'form-group-component',
template:`
<fieldset ngModelGroup="anotherAddress">
<div>
<label>Street2:</label>
<
浏览 1提问于2016-08-30得票数 12
我有一个完美工作的表单。当我在我的项目上运行"ng test“时，这个问题就出现了。我使用的是在使用cli构建项目时提供的原始测试用例。 因果报应输出： AppComponent should create the app
Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<div id="theForm">
<h2>Bus Form</h2>
浏览 9提问于2019-01-25得票数 0
回答已采纳
我正在制作一个移动应用程序。在我的登录表单中，我有两个TextFields
<TextField hint="Email Address" keyboardType="email" [(ngModel)]="email" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField hint="Password" secure="true" [(ngModel)]=
浏览 6提问于2017-04-19得票数 2
回答已采纳
我在角9上有模板驱动的登录表单。
<form name="login" #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && login()" *ngIf="loginPage" novalidate>
<ion-item>
<ion-label position="stacked">{{accountPage.your_email}} </ion-label>
浏览 1提问于2020-11-18得票数 0
回答已采纳
1回答
一旦运行Unit-test angular CLI，我就会得到以下错误。以下错误发生在表单上。
Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("<form [ERROR ->]#userForm = "ngForm" (ngSubmit)="onSubmit(userForm.value)">
<div class="form-group">
浏览 0提问于2017-09-28得票数 1
我使用的是angular6 multi-select，它有一个来自ngOnInit上的角服务的对象数组中的项列表，它正在传递到multi-select中：
this.sensorTypes = [
{ label : "Power", value : "P"},
{ label : "Current", value : "C"},
{ label : "Voltage", value : "V"}
]
在默认情况下，我希望在表单加载时在multi-select中设置2个值。为此，我将ng
浏览 1提问于2019-02-21得票数 18
回答已采纳
我正在使用p-复选框pf主要的ng 4.1 rc2版本。
我得到了以下错误
Can't bind to 'ngModel' since it isn't a known property of 'p-checkbox'.
我已经在app.module.ts中添加了公共模块，表单模块，但它仍然不起作用。
浏览 3提问于2017-07-01得票数 13
回答已采纳
我正在使用Nativescript启动一个应用程序，我仍然不太了解这个框架。我试图创建一个页面创建一个用户帐户，我有一个表单，你必须写你的电子邮件和密码。问题是，我需要捕获用户编写的字符串，并为此使用(ngModel)，但我有一个错误。我已经在我的NativeScriptFormsModule中导入了app.module.ts，这会导致我的错误。
这是我的create.user.component.ts
import { Component } from '@angular/core';
import { RouterExtensions } from 'native
浏览 0提问于2017-04-26得票数 0
1回答
我正在尝试将提前类型的http示例添加到我的项目(ng-引导)中。我只是简单地复制了typeahead http html和typescript文件。然后，我更改了我的app.module.ts以包括前面的文件类型：
import { WikipediaService } from './components/TypeAhead/typeahead-http';
import { NgbdTypeaheadHttp } from './components/TypeAhead/typeahead-http';
我已经将NgbdTypeaheadHttp添加到声明
浏览 2提问于2017-03-26得票数 1
回答已采纳
3回答
在我的application.one中有两个模块是雇主和第二个是登陆。我已经在登陆模块中创建了一个组件，我想与雇主模块共享这个组件。为此，我在父模块中的app.module.ts中声明了这个组件，并在子模块中使用它们。 ? ? 如果我在单个模块中使用它，它已经可以工作了，但是当我在不同的模块中共享它时，它会显示错误 student-student ing.Component.html和student-student ing.Component.ts <div class="stu_profile_ratings">
<h3&g
浏览 8提问于2018-12-20得票数 2
我使用AntDesignforAng角度(ng-zorro)，并使用简单的switch模块来显示开关。
当我在每个文档中添加代码时：
<nz-switch [ngModel]="true"></nz-switch>
应用程序不会编译，我得到了以下错误：
Can't bind to 'ngModel' since it isn't a known property of 'nz-switch'
浏览 3提问于2022-05-23得票数 0
我创建了一个组件类，如下所示，我试图将类字段绑定到模板，但我看到了下面的错误
src/app/admin/projects/projects.component.html:41:34中的错误- ERROR NG8002:无法绑定到“ngModel”，因为它不是“input”的已知属性。name="ProjectID“(ngModel)="newProject.projectID">错误发生在组件ProjectsComponent的模板中。src/app/admin/projects/projects.component.html:49:36 - error NG8
浏览 3提问于2020-08-08得票数 0
回答已采纳
我用的是角度加载模块。每个组件都有自己的模块。如果我在根模块(app.module)中导入一个模块，它必须正常工作。例如，我在HttpClientModule中导入了app.module，并可以在子组件中使用它。
但是关于FormsModule，这并不是很好。我必须在子模块中导入它，否则，我会得到以下错误：
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
你知道为什么会这样吗？
浏览 2提问于2019-03-02得票数 3
回答已采纳
我意识到关于这个问题还有其他问题，但我的情况有点不同。
我们的架构团队，以他们无限的智慧，决定将NgForms抽象为一个自定义组件。我最近遇到的问题是，试图使用NgModelGroup指令会导致Angular报错"No provider for ControlContainer“。
引用这篇媒体文章：，我尝试在我的主机组件中使用'viewProviders：{ provide: ControlContainer，useExisting: NgForm }‘。然而，Angular接着抱怨说，"NullInjectorError:没有NgForm的提供者！“
作为示例，下面
浏览 0提问于2018-08-13得票数 1
我试图用Angular.JS创建一个简单的表单，学习如何使用这个框架。当我将(ngModel)添加到我的第一个表单输入时，我会丢失所有的HTML。当我取出它(ngModel)时，所有的html都会返回。这是我的代码：
app/user.ts
export class User {
constructor(
public firstname: string = "",
public lastname: string = "",
public email: string = "",
public password:
浏览 3提问于2017-09-01得票数 1
回答已采纳
我使用textMask节点模块格式化表单的输入标记。我遵循了Git存储库中的所有指令，模块运行得非常完美。但是，当我尝试运行组件测试时，它是这样的：Error: Template parse errors: Can't bind to 'textMask' since isn't a known property.。为什么我有这个问题？这是我的HTML模板：
<input [textMask]="{mask: cpfMask}" type="text" id="inputCpf" required patt
浏览 1提问于2018-04-25得票数 2
回答已采纳
我的app.module.ts需要添加FormsModule来运行我的模板代码，我怎么知道呢？
这个错误有点神秘，
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
什么是好的
import { NgModel } from '@angular/forms';
如果我没有
import { FormsModule } from '@angular/forms';
在我的app.module.ts中，添加到import
浏览 4提问于2017-09-08得票数 0
我正在开发一个离子/角度的应用程序，并希望使用ngModel作为永远。我正在从一个模态打开一个模态，然后想使用它，比如：
<ion-list>
<ion-item>
<ion-label position="stacked">Name des Rezepts</ion-label>
<ion-input [(ngModel)]="model" ></ion-input>
</ion-item>
</ion-list>
<ion-button (click
浏览 3提问于2022-02-22得票数 0
1回答
为什么双向绑定不起作用？？我正在导入表单模块并使用香蕉语法。我也尝试过反应形式，但这也不起作用。它不是用预定义的值填充输入字段，也不是在用户与该字段交互时更新它。
app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CommonModule,
FormsModule,
AppRoutingModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent],
sc
浏览 0提问于2021-01-24得票数 0
我有一些AutocompleteModule与SharedModule一起导出到整个应用程序。在SharedModule中，我已经将FormsModule导出到整个应用程序。
但是，当我试图在ngModel中使用AutocompleteModule时，我发现了一个关于ngModel的错误。当我将FormsModule导入AutocompelteModule时，它也可以正常工作。
但是我把FormsModule出口到了SharedModule。所以原因问题。我可以将SharedModule导入到AutocompleteModule以接收对FormsModule的访问吗？(但我在医生身上看到了做那
浏览 2提问于2016-10-07得票数 1
回答已采纳
在使用Angular6提交登录表单后，我无法获得烤面包通知。我正在学习如何使用Angular6集成Toastr源代码：
该文章要求运行
npm install ng6-toastr-notifications --save
我已经这样做了，在app.module.ts.上设置了所有的配置，当我编译这个应用程序时，这是一个成功的过程。
我的问题是，一旦提交了登录表单，我就无法让Toastr显示。我是否需要在login.html组件上设置html标记元素？
如果我将下面的代码移到logincall()函数中，它将在编译期间显示意外的错误 ';‘
// set toastr
showSuc
浏览 1提问于2018-10-23得票数 1
回答已采纳
我已经查看了stackoverflow，也阅读了，但仍然没有成功。我正在尝试在我的AngularJS web应用程序中使用iCheck，但我仍然只能看到常规的复选框。我也在使用require.js。你有什么办法让它工作吗？
谢谢!
HTML：
<label ng-disabled="true" style="font-weight:normal">
<input icheck type="checkbox" ng-model="permissions[0]"
浏览 1提问于2014-12-02得票数 0
3回答
我在使用NgModel时遇到了问题，当我想从输入中保存数据时，它无法工作。
Uncaught Error: Template parse errors:
Can't bind to 'NgModel' since it isn't a known property of 'input'. ("
placeholder="Account number"
value="{{ account.number }}"
[ERROR ->][(NgModel)]="ne
浏览 0提问于2019-07-11得票数 0
回答已采纳
我对角很陌生，被(改变)事件和(ngModel)混淆了。它们都用于跟踪表单的状态吗？我可以使用ngModel作为(更改)或者哪个更好？问题是，当我有一个带有输入type="file“的表单时。
当我使用(ngModel) <input type="file" [(ngModel)]="link" name="link"/>并通过this.link获取值时。在后端，它返回一个空对象{}。
但是当我使用(更改) <input type="file" name="link" (change)=&
浏览 1提问于2019-12-29得票数 0
回答已采纳
1回答
尝试使用
Uncaught Error: Template parse errors:
Can't bind to 'textMask' since it isn't a known property of 'input'. ("lex="18" fxFlexOffset="1">
<input [ERROR ->][textMask]="{mask: numberMask}" type="text" [(ngModel)]
浏览 0提问于2017-11-09得票数 1
1回答
在我的SharedModule中，我想把相关的代码分成多个子模块。但是，当我这样做时，我会丢失来自共享模块的公共导入。例如，我在导入SharedChildModule之前导入了FormsModule，但当我尝试在SharedChildModule中使用ngModel时，它告诉我ngModel不可用。是否可以将子模块放在共享模块中，并让这些模块继承SharedModule中的模块
当我在SharedModule中直接包含来自ChildSharedModule的组件和指令时，没有任何问题。
@NgModule({
declarations: [],
exports: [
Commo
浏览 2提问于2019-05-15得票数 0
救命啊！！我试图添加一个带有属性[primary] = 'true'的kendo按钮，但是我得到了以下错误：
NodeInvocationException:模板解析错误:无法绑定到“主”，因为它不是已知的“按钮”属性。(“]primary=”true“>登录
app.module.browser.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppMod
浏览 2提问于2017-10-05得票数 1
在angular2中，如何使用ngModel进行选择列表
我正在使用最新的angular2库。
当前的尝试：
<select class="col-xs-12 col-xs-offset-0 col-md-2 col-md-offset-0" id="County" name="county" [(ngModel)]="county">
<option>Filter by County</option>
<option *n
浏览 5提问于2016-10-30得票数 1
app.module.ts：
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
],
register.component.ts：
export class RegisterComponent implements OnI
浏览 1提问于2021-01-16得票数 0
1回答
我是角的初学者，我可能需要一些帮助在这个东西。首先，我将展示它是如何工作的，然后我将写我希望它如何工作。
这是使用ngModel时的常规方法：
<form>
<input name="name" placeholder="name" [(ngModel)]="model.name" value="" />
<select name="select" [(ngModel)]="model.select">
<o
浏览 0提问于2017-12-14得票数 1
回答已采纳
我正在尝试获取mat-slide-toggle的当前值，但不幸的是，我会得到一个错误：
Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'.
我在组件的html部分中使用这样的切换：
<mat-slide-toggle color="primary" [(ngModel)]="showInnerView">
Default Sl
浏览 0提问于2018-02-11得票数 21
回答已采纳
2回答
因此，我试图在角4中创建一个自定义表单组件，我添加了ngModel工作所需的一切，但它没有。
这是我的子组件：
export class Search extends ControlValueComponent {
}
它扩展到处理所有"ControlValueAccesor“的类ControlValueAccesor。
这是类ControlValueAccesor：
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
import {forwardRef, Input} fr
浏览 2提问于2017-10-27得票数 3
回答已采纳
在更新星云主题(4.4.0至9.0.1) wrt角度(8.2.3至13.2.1)时，我面临以下问题：
‘’nb卡头‘不是已知的元素：
如果‘nb-卡头’是一个角度组件，然后验证它是该模块的一部分。
如果‘nb-卡头’是一个网络组件，那么添加'CUSTOM_ELEMENTS_SCHEMA‘到该组件的'@NgModule.schemas’以抑制此消息。
在exportAs 'ngModel‘中没有找到任何指令。
[(ngModel)]="startupWizard.company.state" #state="ng
浏览 15提问于2022-02-09得票数 0
1回答
我对角质很陌生。我正在Visual代码中工作。
我的app.component.html看起来是这样的：
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
我的app.component.ts看起来是这样的：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.compon
浏览 2提问于2017-10-08得票数 1
回答已采纳
1回答
一开始我有个问题，如果用茉莉花做测试会很困难吗？这个应用程序在编译过程中运行得很好，但是当我测试它时，这里出现了一百万个错误。我已经阅读了任何关于导入FormsModule的资源。
我有这样的组成部分：
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Ht
浏览 1提问于2018-05-15得票数 1
回答已采纳
如何仅在ajax请求的数据到达后呈现模板？
在这个版本中，我有一个ajax请求，以及请求延迟的方式，在没有数据的情况下加载表单。数据以几秒钟的延迟加载。
这种行为是不雅的
@Component({
providers: [CompanyService],
templateUrl:'<input type="text" id="address" name="address" [(ngModel)]="company.address" #address="ngModel" >'
浏览 5提问于2016-10-23得票数 0
回答已采纳
我遵循一个角教程。
关于进口，我们带来了以下几个方面：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
在@NgModule中，我们只导入BrowserModule & FormsModule。
imports: [
BrowserModule,
FormsModule
],
我们为
浏览 1提问于2018-03-23得票数 0
回答已采纳
我是个角泳初学者。我正在使用Jasmine测试我的代码，但是我得到了一些错误。根据我的知识，我已经试着把所有东西都进口了。以下是我所面临的错误：
错误: NG0301:导出名称“ngForm”而不是未定义为真实的ngForm。
此外，在浏览器中，代码在功能方面运行良好，但是我在Jasmin隔离测试中遇到了这个错误。我如何解决这些问题？
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
浏览 7提问于2022-02-18得票数 2
1回答
我正在用惰性负载加载模块。我现在的情况是，我需要在另一个模块中使用一种形式的模块。
例如，有产品模块和品牌模块。两者都是在延迟加载中加载的。但我想让用户能够在产品表单中注册品牌。但我的问题是，这两个模块都是懒惰加载的。
我真的需要完全加载这两个模块吗？或者我只能加载所需的组件吗？
我的加载延迟负载：
const productRoutes: Routes = [
{
path: 'product',
loadChildren: 'app/admin/product/product.module#ProductModule',
canL
浏览 1提问于2017-03-28得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
