Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]

2023-11-17

“对呀对呀!……回字有四样写法,你知道么?”,当时鲁大大如此讽刺孔乙己,意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在Angular 2的世界中,很少存在无用之物,ngModel有三种写法,你知道吗?

表单的设计永远都是应用的重头戏,而其中最基本的功能点即是通过一个个输入组件实现的,为此Angular 2为我们提供了锋利的武器:ngModel。而其不同的使用方式有着大不相同的作用:

ngModel

如果单独使用ngModel,且没有为其赋值的话,它会在其所在的ngForm.value对象上添加一个property,此property的key值为ngModel所在组件设置的name属性的值:

<form novalidate #f="ngForm">
    <input type='text' name='userName' placeholder='Input your userName' ngModel>
</form>
<p>
    {{ f.value | json }}    // { "userName": "" }
</p>

此时需要注意的是,单独使用ngModel时,如果没有为ngModel赋值的话,则必须存在name属性

也就是说,单独ngModel的作用是通知ngForm.value,我要向你那里加入一个property,其key值是组件的name属性值,其value为空字符串。

[ngModel]

可是,如果想向ngForm中添加一个有默认值的property需要怎么做呢?这时就需要使用单向数据绑定的格式了,也就是[ngModel]:

this.model = {
    userName: 'Casear'
};

<form novalidate #f="ngForm">
    <input type='text' name='userName' placeholder='Input your userName' [ngModel]='model.userName'>
</form>
<p>
    {{ f.value | json }}    // { "userName": "Casear" }
    {{ model | json }}      // { "userName": "Casear" },不会随着f.value的变化而变化
</p>

这里我们使用了单向数据绑定的特点,可以为ngForm.value添加一个带有初始值的property。

注意单向数据绑定的特点,此时在表单输入框中做的任何改变都不会影响model中的数据,也就是说this.model.userName不会随着输入框的改变而改变。不过输入框改变会体现在f.value中。

[(ngModel)]

上述的单向数据绑定在单纯地提供初始值很有用,不过总是有些场景需要将用户输入体现在我们的model上,此时就需要双向数据绑定了,也即[(ngModel)]:

this.model = {
    userName: 'Casear'
};

<form novalidate #f="ngForm">
    <input type='text' name='userName' placeholder='Input your userName' [(ngModel)]='model.userName'>
</form>
<p>
    {{ f.value | json }}    // { "userName": "Casear" }
    {{ model | json }}      // { "userName": "Casear" },会随着f.value的变化而变化
</p>

这里我们不仅为ngForm.value添加了一个带有初始值的property,还能实现Model和View层的联动,尽管这种方式可能并不好,但是在某些情况下也不失为一种简便的方案。

关于[(ngModel)]的内部逻辑可查看Angular 2 父子组件数据通信

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)] 的相关文章

随机推荐

  • 03-MySQL数据类型

    一 数值类型 整数 MySQL 主要提供的整数类型有 TINYINT SMALLINT MEDIUMINT INT BIGINT 浮点数 浮点类型有两种 分别是单精度浮点数 FLOAT 和双精度浮点数 DOUBLE 定点类型 只有一种 就是
  • 记录一次 JS 解密去混淆的经历 -- 如何破解加密的 JS 代码(一)

    写在前头 昨天发了一个 某JS最牛加密脱壳解密破解去混淆工具 有朋友说上代码不如讲一下思路 于是今天准备捋一下这个思路 顺便当整理复习了 需要直接解密代码的请看上一篇文章 这里只有思路与过程 阅读此文默认你有一定的 JavaScript 基
  • vscode工作区同时显示多个文件

    有时候安装的vscode打开一个文件又打开另一个文件只会保存新的文件 旧的文件别替换 这样做项目比较难受 所以用下面方法可以打开多个文件 workbench editor showTabs true
  • 【E2E】Tesseract5+VS2017+win10源码编译攻略

    一 记录我目前在win10 X64和VS2017的环境下成功编译Tesseract5 0的方式 二 记录在VS2017 C 工程中调用Tesseract4 0的方法 三 记录编译和调用Tesseract4 0过程中踩到的坑和相应的解决方案或
  • IMU立大功:有效减小建筑工人高空坠落风险

    尽管建筑行业不断努力改善工作场所安全 但它仍然是全球最危险的行业之一 建筑行业的工作死亡或致命工伤比例为25 在这些致命伤害中 大约36 是由高空坠落造成的 这是建筑行业从业者意外死亡的主要原因之一 其他国家 包括澳大利亚 中国和韩国 也因
  • 使用eclipse创建JAVA项目

    打开eclipse软件 选择好工作区域 就是项目的储存地址 后登陆 File New Project 选择 Java Project 输入项目名称 点击Finish SRC是专门放java源代码的文件夹 就是你在IDE里编写的各个java类
  • C语言上机实验思路分享9

    实验项目名称 实验十 C 文件基本操作 实验目的及要求 1 掌握文件和文件指针的概念以及文件的定义方法 2 了解文件打开和关闭的概念和方法 3 掌握有关文件操作的函数 实验内容 方法和步骤 1 文件 stu info1 txt 包含学生的基
  • 模板型模板参数报错,无法调试通过,---《深入实践c++模板》例子

    include
  • 迪杰斯特拉算法求图的某个顶点到其他顶点的最短路径问题

    迪杰斯特拉算法 使用图的广度优先遍历算法 比如先从G点出发 找到能与G直接连接的顶点 然后才从与G最近的A出发 找到与A相邻的节点 通过比较G到每个顶点的距离大小 筛选出到每个点的最短路径 代码 迪杰斯特拉算法球最短路径问题 public
  • hdu 3966 Aragorn's Story

    Problem acm hdu edu cn showproblem php pid 3966 Reference 树链剖分 树链剖分原理 树链剖分详解及模板 HDU3966 树链剖分 Meaning 一棵 n 个点的树 每给结点有个值 三
  • BERT、BART、T5 等法学硕士的比较分析

    探索语言模型 介绍 在这篇博文中 我将讨论 BERT BART 和 T5 等大型语言模型 到 2020 年 法学硕士领域取得的重大进展包括这些模型的开发 BERT和T5是Google开发的 BART是Meta开发的 我将根据这些型号的发布日
  • css实现水平居中

    代码示例 div class box div class box1 div div 1 弹性布局 推荐 display flex 这些要添加在父级的 是父级的属性 父级添加display flex 父级添加justify content c
  • Zookeeper 基本操作

    Zookeeper 基本操作 文章目录 Zookeeper 基本操作 1 查看zk的运行状态 2 客户端连接zk 3 ls 查看 4 get 获取节点数据和更新信息 5 stat 获得节点的更新信息 6 ls2 ls命令和stat命令的整合
  • java localdate mysql_如何使用JDBC从java.sql.Date获取LocalDateTime对象?

    Java8的java time包提供了一个名为LocalDateTime的类 用于获取本地日期和时间的当前值 除日期和时间值外 还可以使用此字段来获取其他日期和时间字段 例如 一年中的某天 一周中的某天和一年中的某周 将java sql D
  • DIY简单的RTOS(一)

    说明 在看了很多关于RTOS的文章 一直想做一个简单的RTOS 苦于现有资料非常少 在看了很多关于现有RTOS的底层实现 再结合相关文章 完成一个简单的RTOS demo 代码难免有不合理之处 仅当个人学习做笔记使用 项目代码 什么是RTO
  • opencv图像的基础操作

    读取图像 cv imread 参数 要读取的图像 读取 式的标志 cv IMREAD COLOR 以彩 模式加载图像 任何图像的透明度都将被忽略 这是默认参数 cv IMREAD GRAYSCALE 以灰度模式加载图像 cv IMREAD
  • osgEarth的Rex引擎原理分析(五十一)osg::Program与osgEarth::VirtualProgram的关系

    目标 四十五 中的问题113 osgEarth VirtualProgram在apply时用到了osg Program 也就是VirtualProgram最终是要通过osg Program实现着色器功能 只不过VirtualProgram中
  • AI工具究竟是帮手还是对手?你怎么看,一起来聊聊吧!

    AI工具究竟是帮手还是对手 你怎么看 一起来聊聊吧 1 你现在正在哪个领域学习或工作呢 你用过哪些AI智能工具 2 作为行业人士或正在学习的学生 你认为AI工具的出现会提升你的工作或学习效率吗 3 对于AI智能工具的出现 我们应该做好哪些准
  • 51单片机(十四)—— 中断功能介绍

    中断是单片机的一个重要功能 本文我们就对51单片机的中断进行介绍 所谓 中断 通俗一点讲 就是单片机停止正在执行的任务 转去执行其它的急需解决的任务 当这个任务完成之后 在回到原来的任务继续执行 中断就是为了使单片机能够对外部或内部随机发生
  • Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]

    对呀对呀 回字有四样写法 你知道么 当时鲁大大如此讽刺孔乙己 意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲 但是在Angular 2的世界中 很少存在无用之物 ngModel有三种写法 你知道吗 表单的设计永远都是应用的重头戏 而