首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法绑定到“ngModel”,因为它不是“input”的已知属性

在Angular 6中,如果你尝试在<input>元素上使用ngModel指令,但遇到错误提示“无法绑定到'ngModel',因为它不是Angular 6中'input'的已知属性”,这通常是因为你没有正确导入FormsModule

ngModel是Angular表单模块的一部分,因此你需要确保在你的模块中导入了FormsModule。以下是如何在Angular 6中正确导入和使用FormsModule的步骤:

步骤 1: 导入FormsModule

在你的Angular模块文件(通常是app.module.ts)中,导入FormsModule

代码语言:javascript
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加FormsModule到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤 2: 在组件中使用ngModel

在你的组件模板文件(例如app.component.html)中,你可以使用ngModel指令:

代码语言:javascript
复制
<input [(ngModel)]="yourVariable" name="yourInputName">

这里的yourVariable是你组件类中的一个属性,yourInputName是表单控件的名称。

示例

假设你有一个简单的组件,其中包含一个输入框,你希望在输入框中输入的内容能够绑定到组件类的一个属性上:

app.component.ts

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  yourVariable = ''; // 初始化属性
}

app.component.html

代码语言:javascript
复制
<input [(ngModel)]="yourVariable" name="yourInputName">

注意事项

  1. 确保Angular版本兼容ngModel在Angular 2及以上版本中可用,但如果你使用的是Angular 4或更早版本,可能需要使用ngModel的替代方案,如ng-model指令(注意没有括号)。
  2. 表单模块导入顺序:确保FormsModule在模块的imports数组中的顺序正确,通常放在BrowserModule之后。
相关搜索:仍然得到:“无法绑定到'ngModel‘,因为它不是’input‘的已知属性。”无法绑定到'ngModel‘,因为它不是Angular 6中'input’的已知属性Angular 2-无法绑定到'ngModel‘,因为它不是'input’的已知属性无法绑定到'ngModel‘,因为它不是'textarea’的已知属性无法绑定到“ngModel”,因为它不是“select”的已知属性这个错误是什么(无法绑定到'ngModel‘,因为它不是'input’的已知属性。)Angular 2:模板分析错误:无法绑定到'ngModel‘,因为它不是'input’的已知属性无法绑定到'ngModel‘,因为它不是'p-autoComplete’的已知属性无法绑定到'ngModel‘,因为它不是'ng-toggle’的已知属性无法绑定到“ngModel”,因为它不是“quill-editor”的已知属性无法绑定到“ngModelOptions”,因为它不是“ion-input”的已知属性Angular Karma -无法绑定到'alwaysShowCalendars‘,因为它不是'input’的已知属性无法绑定到'ngModel‘,因为它不是angular 11中'input’的已知属性,而我已经导入了FormsModule模板分析错误:无法绑定到'ngbTypeahead‘,因为它不是'input’的已知属性无法绑定到“”ngModel“”,因为它不是子模块的“input”的已知属性,已导入公共、窗体和Reactive无法绑定到'startingCategory‘,因为它不是'div’的已知属性无法绑定到'cdkDragFreeDragPosition‘,因为它不是'div’的已知属性无法绑定到“ngIf”,因为它不是“table”的已知属性无法绑定到“chartType”,因为它不是“canvas”的已知属性无法绑定到'useStickyClasses‘,因为它不是'div’的已知属性
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

,但Angular首先查看名称是否匹配已知指令事件属性,如下例所示: <!...这是一个例子: 里面[(ngModel)] 回顾一下名称绑定,请注意,您可以通过单独绑定元素value属性和输入事件来获得相同结果...您不需要为您编写Angular组件添加值存取器,因为您可以将值和事件属性命名为适合Angular基本双向绑定语法,并完全跳过NgModel。上面显示sizer是这种技术一个例子。...单独ngModel绑定是对绑定元素原生属性改进。 你可以做得更好。 你不应该提到数据属性两次。...绑定[ngSwitch]。 如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 改变了其同伴指令行为。 它不直接操作DOM。

30K20
  • AngularDart4.0 指南- 表单 顶

    创建控制表单组件。 用初始表单布局创建一个模板。 使用ngModel双向数据绑定语法将数据属性绑定每个表单控件。 为每个表单输入控件添加一个ngControl指令。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中输入和输出属性)来绑定父组件。 这不是现在问题,这些未来变化不会影响表单。...p模板输入变量在每次迭代中是不同power; 您使用插值语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定英雄。...变量(通过#name =“ngForm”语法)绑定input元素关联NgModel。...如果需要,可以将相同类型错误消息添加到中,但这不是必须因为选择框已经将权限限制为有效值。

    17.5K30

    Angular 从入坑挖坑 - 表单控件概览

    而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新数据模型,而不是直接修改原来数据模型 4.2、模板驱动表单 通过使用表单专属指令(例如 ngModel 进行双向数据绑定)...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性元素,而...name 属性则是 angular 用来注册控件 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 在表单中使用 ngModel...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以将提交事件绑定表单 ngSubmit 事件属性上,通过模板引用变量形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单提交按钮...formGroup 指令绑定 form 元素,然后将控件组每一个属性通过 formControlName 绑定具体对应表单控件上 <form [formGroup]='profileForm'

    18.9K20

    Angular 内容投影

    虽然我们实现了内容投影,即把标题和按钮都成功投影 AuthFormComponent 组件中,但你会发现按钮位置并不是预期。那么如何解决这个问题呢?...因为 ng-container 容器不再匹配 select="auth-remember"。为了解决这个问题,我们必须使用 ngProjectAs 属性,它可以应用于任何元素上。...因此,投影内容生命周期将被绑定它被声明地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望一致性” 意味着作为开发人员,可以基于应用程序代码,猜测其行为。...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库内部代码。...性能原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序工作量。

    2.6K20

    Angular—都2019了,你还对双向数据绑定念念不忘

    你肯定会关心是,Angular不是明明实现了双向绑定吗,为什么文章开头会说,没有?已经2019了,该忘东西还是忘了吧,这不是喜新厌旧,应该是与时俱进。...上面这段代码中,组件中属性绑定到了input元素value属性,自然input初始值就应该是’John‘。input元素上会产生input事件,通过监听这个事件把name重新赋值。...$event可以视作获取输出关键字,不同场景下代表对象是不同,上面这段代码中由于是监听了input事件,所以代表就是 InputEvent,通过属性查询我们获取到了事件上传递值。...依然是有输入,有输出,只不过属性名称由value变成了ngModel,事件名称由input变成了ngModelChange。...在不看源码情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModelinput元素value值关联起来。

    4.4K30

    Angular 中数据绑定

    两种类型数据绑定 单向数据绑定 从组件(数据)视图:绑定组件数据视图上,我们使用插值 Interpolation 和属性 Property 绑定。...从试图组件(数据):绑定试图数据组件数据上,我们使用事件 Event 绑定。 双向数据绑定 我们使用 ngModel 来实现双向数据绑定。...组件数据绑定元素属性上。对组件属性数据更改会更改相应元素属性。 表达式 vs 属性 Interpolation 绑定:它是为单个表达式或者变量而设计。...你不可以使用它绑定属性,只能用来显示动态内容。 Property 绑定允许你直接绑定元素属性。你可以用它来设定 HTML 元素中 attributes 和 properties 值。...在双向绑定中,我们使用包含在 FormsModule 包中 ngModel

    19810

    Angular开发者手册重点翻译之指令(一)文本和属性绑定ngAttr属性绑定

    在下面的例子里,我们说元素匹配了ngModel指令: 下面的例子也同样匹配ngModel指令: <input data-ng...可是因为HTML是大小写不敏感,所以我们在DOM中使用小写方式去引用指令,通常在DOM元素上使用短划线分隔属性。 规范化形式如下所示: 1:去除元素或者属性以x-和data-开头。...可以去绑定,但是当我们查看控制台,我们将会看到一些这样信息 Error: Invalid value for attribute cx="{{cx}}" 因为SVG DOM API是严谨话,你不可以简单写...但是你可以使用ng-attr-cx来绕过这个问题,加入有一个拥有绑定属性是拥有ngAttr前缀,在绑定阶段,它将会被应用到相应无前缀属性上,这样就允许你去绑定你想要属性,否则你只能看着它被浏览器处理掉...,可以使用下划线去指示属性绑定一个实际驼峰属性上。

    1.7K60

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    主要是因为前段时间写过一些关于Angualr相关实战文章,有些爱学习小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我大多数小伙伴都是后端同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁语法总结...事件在用户输入时触发: 6、属性绑定 [ ] 语法: 7、[(ngModel)] :双向绑定NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性。...ng-bind 绑定 HTML 元素应用程序数据 ng-bind-html 绑定 HTML 元素 innerHTML 应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template...将文本转换为列表 (数组) ng-model 绑定 HTML 控制器应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时行为 ng-mouseenter

    5.3K41

    AngularDart4.0 指南- 模板语法一 顶

    内置指令 内置属性指令       NgClass       NgStyle       NgModel ([(ngModel)]) 内置结构指令      NgIf      NgFor          ...幂等性 幂等表达式是理想因为没有副作用,并且改善了Angular变化检测性能。 对Angular来说,一个幂等表达式总是返回完全相同东西,直到一个依赖值发生变化。..."> 单向 人们通常将属性绑定描述为单向数据绑定因为它从一个组件数据属性向一个目标元素属性传递一个值。...您不能使用属性绑定将值从目标元素中拉出。 您不能绑定目标元素属性来读取。 你只能设置。 同样,您不能在目标元素上使用属性绑定来调用方法。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式中任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。

    5.2K10

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    [(ngModel)]="hero.name" placeholder="name"> ''', 添加英雄属性 HeroDetailComponent模板绑定组件英雄属性...声明这个hero是一个输入属性,用@Input()注释:lib/src/hero_detail_component.dart (Input annotation) @Input() Hero hero...hero属性是HeroDetailComponent类中唯一东西。 它所做就是通过其hero输入属性接收一个hero对象,然后绑定属性模板上。...通过将AppComponentselectedHero属性绑定HeroDetailComponenthero属性来将主AppComponent与HeroDetailComponent进行协调。...如果您在浏览器开发工具控制台中查找错误。 没有错误。 就好像Angular忽略了新标签。 那是因为忽略了新标签。 指令列表 浏览器会忽略不能识别的HTML标签和属性

    1.8K10

    Angular 从入坑挖坑 - 组件食用指南

    ,将数据源与视图进行绑定,从而实现源数据与用户呈现一致性 从数据源视图:插值、组件中属性、dom 元素 property 3、css 样式、css 类 从视图数据源:事件 视图与数据源之间双向绑定...='statement'> 双向视图数据源;数据源视图 1、使用 [()] 进行绑定:2、使用 bindon...4.1.3、数据绑定 单向数据绑定 {{title}} 双向数据绑定 <!...,完成对于页面元素样式批量设置 NgModel:双向数据绑定 ?...@Input 用来获取数据,@Output 用来向外发送数据 4.4.2、子组件获取父组件信息 在父组件中,添加对于子组件引用,并将需要传递数据 or 方法绑定子组件上 传递数据直接将父组件中属性值赋值给绑定在子组件上属性就可以了

    15.8K30
    领券