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

Angular 2:在[(ngModel)]内获取模型名称

Angular 2是一种流行的前端开发框架,用于构建Web应用程序。在Angular 2中,[(ngModel)]是一个双向数据绑定的指令,用于将表单控件的值与组件中的模型数据进行绑定。

[(ngModel)]内获取模型名称是指在Angular 2中,通过[(ngModel)]指令绑定的表单控件,可以通过模板引用变量来获取其绑定的模型名称。模板引用变量是在模板中定义的一个变量,用于引用特定的DOM元素或指令。

以下是一个示例代码,演示如何在[(ngModel)]内获取模型名称:

代码语言:txt
复制
<input type="text" [(ngModel)]="myModel" #myInput>
<button (click)="getModelName(myInput)">获取模型名称</button>

在上述代码中,我们使用了一个input元素,并通过[(ngModel)]指令将其与组件中的myModel属性进行双向绑定。同时,我们使用了模板引用变量#myInput来引用这个input元素。

在组件的代码中,我们可以定义一个方法getModelName,用于获取模型名称:

代码语言:txt
复制
getModelName(inputElement: HTMLInputElement) {
  console.log(inputElement.getAttribute('ngModel'));
}

在上述代码中,我们通过inputElement.getAttribute('ngModel')来获取input元素的ngModel属性,即获取了模型名称。

Angular 2的双向数据绑定和模板引用变量使得在表单控件中获取模型名称变得非常方便。这种特性可以帮助开发者更好地管理表单数据,并与模型进行交互。

腾讯云提供了一系列与Angular 2开发相关的产品和服务,例如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。更多关于腾讯云的产品和服务信息,请访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单 顶

模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令和技术Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...p模板输入变量每次迭代中是不同的power; 您使用插值语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...关注绑定语法:[(ngModel)] =“...”。 现在运行应用程序并输入名称输入,添加和删除字符。 您会看到这些字符出现在诊断文本中并消失。 某个时候,它可能看起来像这样: ?...Alter Ego和Hero Power上添加类似的[(ngModel)]绑定和ngControl指令。 用model替换诊断绑定表达式。 通过这种方式,您可以确认双向数据绑定适用于整个英雄模型。...2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid类替换为is-valid。 删除#spy模板引用变量和使用它的诊断。

17.4K30

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

您通过Angular事件绑定声明您对用户操作的兴趣。 事件绑定语法由等号左边括号的目标事件名称和右边带引号的模板语句组成。...如果名称未能匹配已知指令的元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定中,Angular为目标事件设置了一个事件处理程序。...删除英雄更新模型,可能会触发其他更改,包括查询并保存到远程服务器。 这些变化通过系统渗透,并最终显示相关视图。 双向绑定([(…)]) 您经常希望显示数据属性,并在用户进行更改时更新该属性。...绑定的目标是=的左边。 源位于=的右侧。 绑定的目标是绑定标点符号中的属性或事件:[],()或[()]。 源是引号(“”)或插值({{}})。...HeroDetailComponent.hero括号; 它是一个属性绑定的目标. HeroDetailComponent.deleteRequest括号; 它是事件绑定的目标。

29.9K20

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular插值绑定语法。 这些插值绑定将组件的标题和英雄属性值作为字符串显示HTML标题标签。...', 刷新浏览器,页面将显示英雄名 组合HTML和多行模板字符串 要显示所有英雄的属性,请为英雄的id属性添加一个,并为英雄的名称添加另一个。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单和模板语法页面中阅读有关ngModel的更多信息。 @Component(指令:...)...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModelangular_forms库中定义的有效Angular指令,但默认情况下不可用。...您使用内置的ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero的名称,并允许用户更改它。

3.2K10

AngularDart4.0 指南-体系结构概述 顶

Angular 库 ? Angular全体就像是Angular的库的集合。...这是我们的HeroListComponent的一个模板: lib/src/hero_list_component.html Hero List Pick a hero from...它们倾向于以属性的形式出现在元素标签,有时候以名称的形式出现,但更常见的是作为赋值或绑定的目标。 结构指令通过添加,删除和替换DOM中的元素来改变布局。...模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。...它在视图(由模板呈现)和应用程序逻辑(通常包括模型的一些概念)之间起中介作用。 一个好的组件提供了数据绑定的属性和方法。 它委托一切不重要的服务。 Angular不强制执行这些原则。

7.9K30

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

四、Step by Step 4.1、表单简介 用来处理用户的输入,通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单...响应式表单 建立表单 由组件隐式的创建表单控件实例 组件类中进行显示的创建控件实例 表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 表单中使用 ngModel...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div

18.9K20

Angular核心概念:数据绑定

(达教育学习笔记)仅供学习交流 Angular数据绑定 Angular核心概念:数据绑定(1)HTML绑定:{{NG表达式}}(2)属性绑定(3)指令绑定(4)事件绑定()(5)双向数据绑定指令...:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...)]—重点 方向1:Model=》View,模型变则视图变,用[]绑定 方向2:View=》Model,视图(表单元素)变则模型变,用()绑定 <input/select/textarea [(ngModle...ngModel指令FormsModule模块中,使用之前必须添加 app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'...--Angular专用事件:“模型数据改变”ngModelChange-->> 当前的用户绑定{{uname}} ts文件 改变值打印控制台上 uname="dingding";

3.5K10

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

Angular中的写法: // component.ts ... name = 'John'; ......$event可以视作获取输出的关键字,不同场景下代表的对象是不同的,上面这段代码中由于是监听了input事件,所以它代表的就是 InputEvent,通过属性查询我们获取到了事件上传递的值。...依然是有输入,有输出,只不过属性名称由value变成了ngModel,事件名称由input变成了ngModelChange。...不看源码的情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素的value值关联起来。...2. 定义一个输出属性,名称就是输入属性名加‘Change’后缀(如:nameChange)。 3. 确保nameChange输出最新的值。

4.3K30

Angular 6.x 基础教程

第四节 - 事件进阶 获取鼠标事件 第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?...需要注意的是,当 SimpleFormComponent 组件类的属性名称不是 message 时,我们需要告诉 Angular 如何进行属性值绑定,具体如下: export class SimpleFormComponent...而在 Angular 中,我们是通过 ngModel 指令,来实现双向绑定。...上面示例中,我们使用 [(ngModel)]="message" 语法实现数据的双向绑定。该语法也称作 Banana in the Box 语法,即香蕉盒子里 (比较形象生动,记忆该语法)。 ?...第十节 - 组件样式 Angular 中,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式和外联样式。

15.6K20

Angular 内容投影

答案是可以的, Angular 中引入了内容投影的概念,即通过使用 指令来实现内容投影的功能。 ?...这里我们来做个总结,包含在 标签的内容,会被投影到 AuthFormComponent 组件 所在区域。...select 属性 如果你已经理解了上面的内容,那我们继续,假设对于注册表单,”提交“ 按钮的名称我们想改为 ”注册“,而登录表单的 ”提交“ 按钮,我们想改为 ”登录“。...下面我们来介绍组件内部,如何获取 投射的内容。 Angular 中提供了 ContentChild 装饰器来获取投影的元素。...为了能获取多个元素,首先我们需要更新一下 AppComponent 组件,即我们模板中新增两个 AuthRememberComponent 组件,具体如下: @Component({ selector

2.5K20

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

4.1.2、模板绑定语法 angular 应用中,组件扮演着控制器或是视图模型的作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件中...= ["my-class1", "my-class2"]; 4.1.5、事件绑定 事件绑定中,可以通过 $event 参数获取到 dom 事件对象的属性从而获取到模板信息 <input type="text...4.4.3、父组件<em>获取</em>子组件信息 使用 @ViewChild 装饰器<em>获取</em> <em>在</em>子组件上定义一个模板引用变量 父组件内容: 1、使用 @ViewChild 装饰器<em>获取</em>子组件数据...,通过 $event <em>获取</em>到子组件传递的数据值 父组件内容: <em>2</em>、使用 @Output 装饰器配合 EventEmitter <em>获取</em>子组件数据 {{childMsg...父组件内容: 3、通过服务<em>在</em>属性中共享数据 修改服务中的数据值 <button

15.8K30

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的值(获取setvalue

2.8K50

使用angular2中使用nodejs创建服务器,并成功获取参数

首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...const products:Produce[] =[ new Produce(1,"第一个商品",1.99,3.5,"这是第一个商品描述",["图书","音乐"]), new Produce(2,...const server =app.listen(8000,"localhost",()=>{ console.log("服务器已经启动,地址是http://localhost:8000") }); 接着本地从创建好的服务器上获取数据..."@angular/http"; import "rxjs/Rx" @Component({ selector: 'app-product', templateUrl: '....中引入过了,这里需要声明构造函数里头,并引入Http from "@angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务器上的数据: 接下来还有配置: 根目录新建一个文件:proxy.conf.json

4.3K70

Angular6自定义表单控件方式集成Editormd

ControlValueAccessor要处理的就是实现 Model -> View,View -> Model 之间的数据绑定,其具体的作用是: 把 form 模型中值映射到视图中 当视图发生变化时,...(isDisabled: boolean): void; } writeValue:初始化的时候将formControl的值传递给原生表单控件(即,将模型中的新值写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件后,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...@ViewChild('host') host; // hmtl中添加 #host标识,用于选择组件模板的节点 ngAfterViewInit(): void { this.init();... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel

5.2K20

angular知识点梳理第二篇-基本语法

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中的v-model的效果是一致的,只是写法会有一些区别,vue中是可以直接进行使用的...,但是angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import...-- [(ngModel)] 是angular的绑定数据的语法 --> <!

2.5K30
领券