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

Angular 6- Form.valueChanges不更新form.touched属性(模板驱动形式)

Angular 6是一种流行的前端开发框架,它提供了丰富的功能和工具来构建现代化的Web应用程序。在Angular 6中,Form.valueChanges是一个用于监听表单值变化的属性,而form.touched是一个用于判断表单是否被触摸过的属性。

然而,在模板驱动形式下,Form.valueChanges不会自动更新form.touched属性。这是因为在模板驱动形式下,表单的触摸状态是由用户的交互行为来触发的,而不是由Form.valueChanges这个属性来触发的。

要解决这个问题,可以通过在表单元素上添加ngModel指令,并使用ngModelChange事件来监听表单值的变化,并手动更新form.touched属性。具体的步骤如下:

  1. 在模板中,为表单元素添加ngModel指令,并绑定一个变量,例如:
代码语言:txt
复制
<input type="text" name="myInput" [(ngModel)]="myValue" (ngModelChange)="updateTouched()">
  1. 在组件中,定义一个updateTouched方法,用于更新form.touched属性:
代码语言:txt
复制
myValue: string;
touched: boolean = false;

updateTouched() {
  this.touched = true;
}

通过这样的方式,当表单元素的值发生变化时,ngModelChange事件会触发updateTouched方法,从而更新form.touched属性。

需要注意的是,这种解决方案只适用于模板驱动形式下的表单。如果你使用的是响应式表单,可以直接通过订阅Form.valueChanges来监听表单值的变化,并根据需要更新form.touched属性。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。腾讯云云服务器提供了稳定可靠的云计算资源,适用于各种应用场景。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务,提供了丰富的功能和工具来管理和存储数据。

腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接地址:https://cloud.tencent.com/product/cdb_mysql

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

相关·内容

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

对应官方文档地址: Angular 表单简介 响应式表单 模板驱动表单 表单验证 配套代码地址:angular-practice/src/forms-overview 二、Contents Angular...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

vue响应式原理(数据双向绑定的原理)

比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: - 必须使用它的模块机制 - 必须使用它的依赖注入 - 必须使用它的特殊形式定义组件(这一点每个视图框架都有...View部署任何业务逻辑,成为“被动视图”,而所有业务逻辑都部署在Presenter 4、MVVM模式 MVVM模式将Presenter更名为ViewModel(对应MVC中的C-controller...,这样就完成了数据改变到视图更新的一个自动过程 实现数据双向绑定的方法: 发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性,在HTML代码中指明绑定。...脏值检查(angular.js) angular.js是通过脏值检测的方式,对比数据是否有变更,从而决定是否更新视图。最简单的方式就是通过setInterval()定时轮询检测数据变动。...然后,需要compile解析模板指令,将模板中的变量替换成数据,接着初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者。

2.6K40

AngularDart4.0 指南- 表单 顶

模板驱动形式 您可以通过使用本页中描述的特定于表单的指令和技术在Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...但是,此页面重点介绍模板驱动的表单。 您可以使用Angular模板 构建几乎任何表单- 登录表单,联系表单和几乎任何业务表单。...Angular通过许多重复的,模板化的任务使处理过程变得简单。 您将学习如何构建一个模板驱动的表单,如下所示: ? 英雄就业机构使用这种形式来维护关于英雄的个人信息。 每个英雄都需要一份工作。...你还没有使用Angular。 没有绑定或额外的指令,只是布局。 在模板驱动的表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。

17.4K30

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

需要明白,不管你使用模板驱动还是响应式表单(译者注:即模型驱动),FormControl 都总会被创建。...如果你使用响应式表单,你需要显式创建 FormControl 对象,并使用 formControl 或 formControlName 指令来绑定原生控件;如果你使用模板驱动方法,FormControl...image.png 再次强调,不管是使用响应式表单显式创建还是使用模板驱动表单隐式创建,ControlValueAccessor 都总是和 Angular 表单控件进行交互。...// and set this value to the native control // 设置 Angular 表单控件值更新监听器,每当 Angular 表单控件值更新,原生控件值也更新...但是,我们想要的是,使用 slider 组件作为表单的一部分,并使用模板驱动表单或响应式表单的指令与其数据通信,那就需要让其实现 ControlValueAccessor 接口了。

3.7K20

angular面试题及答案_angular面试

双向数据绑定的原理 data => view:数据绑定,模板语法 [ ] view => data: 事件绑定,模板语法() angular的双向数据绑定就是 数据绑定 + 事件绑定 ,模板语法 [...当observable或promise返回data时,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...32.模板驱动表单和 响应式表单的比较 Template-Driven Forms (模板驱动表单) 的特点 使用方便 适用于简单的场景 通过 [(ngModel)] 实现数据双向绑定...ContentChild 与 ViewChild 的异同点 相同点 都是属性装饰器 都有对应的复数形式装饰器:ContentChildren、ViewChildren 都支持 Type...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

10.9K120

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的值(获取setvalue...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

强大的模板构建解决方案。在HTML属性中使用绑定表达式来驱动模板功能。Angular模板引擎对DOM有着深入的理解,且其结构良好的模板减少了创建结果页面所需的代码总量。...此框架提供通用数据绑定和URL驱动方法,用于构建不同的应用程序,重点放在可扩展性。 Ember在2007年最初被发布时,叫做SproutCore。...Handlebars使用许多标记来污染DOM,用作标记以使模板保持更新到模型。 当走出其典型用途时会很麻烦。 Ember的对象模型实现膨胀Ember的整体大小并在调试时调用堆栈。...可以同时更新多个绑定,而不需要耗时的DOM更新。 直截了当地将状态直接链接到UI。状态参数作为对象传递,并合并到React组件的内部参考状态。 使用Handlebars默认模板引擎。...然后,可以在任何Handlebar模板中使用自定义元素。 路由 需要模板或控制器到其路由器配置,必须手动管理。 React处理路由。

12.6K60

Angular 2 表单(上)

本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。...利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也为这些表单的字段添加数据校验。 接下来我们一步步来实现表单的功能。...创建一个表单组件 每个 Angular 表单分为两部分:一个基于 HTML 的模板,和一个基于代码的组件,它用来处理数据和用户交互。...templateUrl 属性指向一个独立的HTML模板文件,名叫 site-form.component.html。 diagnostic 属性用于返回这个模型的JSON形式。...因为模板驱动的表单有它们自己的模块,所以我们得把 FormsModule 添加到本应用的 imports 数组中,这样我们才能使用表单。

1.5K10

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

创建,更新和销毁组件如同用户在应用程序中行走。...模板 ? 您可以使用其配套模板定义组件的视图。 模板是一种HTML形式,告诉Angular如何呈现组件。 模板看起来像普通的HTML,除了一些不同之处。...Angular支持数据绑定,这是一种协调模板部分与组件部分的机制。 添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式的数据绑定语法。...双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。...它们倾向于以属性形式出现在元素标签内,有时候以名称的形式出现,但更常见的是作为赋值或绑定的目标。 结构指令通过添加,删除和替换DOM中的元素来改变布局。

7.9K30

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

从数据绑定插值的第一种形式开始,看看有多少更丰富的模板HTML可以使用。请回到顶部。 插值({{...}}) 在Angular的早期教程中,你遇到了插值的双曲括号{{and}}。...Delete hero 模板语句有一方面的作用。 它是一个事件的全部。 就是如何从用户操作更新应用程序状态。...有关更多信息,请参阅Dart 2.0更新。 记住括号 括号告诉Angular评估模板表达式。 如果省略方括号,Angular会将该字符串视为常量,并使用该字符串初始化目标属性。... 在许多情况下插值是属性绑定较为方便的替代品。 将数据值呈现为字符串时,没有技术上的理由去选择另一种形式,但插值更可读。...当没有要绑定的元素属性时,必须使用属性绑定。 考虑ARIA,SVG和table span属性。 他们是纯粹的属性。 它们不对应元素属性,也设置元素属性。 没有属性目标绑定。

5.1K10

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

然后,它成为一个英雄和英雄细节列表的主/细节形式。 很快就会有新的要求和能力。 您不能在一个组件之上填充所有功能; 这是不可维护的。 您需要将其分解为子组件,每个子组件都专注于特定的任务或工作流程。...HeroDetailComponent模板绑定到组件的英雄属性。...您必须将目标绑定属性声明为输入属性。 否则,Angular拒绝绑定并抛出一个错误。...hero属性是HeroDetailComponent类中唯一的东西。 它所做的就是通过其hero输入属性接收一个hero对象,然后绑定该属性模板上。...你可以在触及英雄详情视图的情况下演化AppComponent。 您可以在将来的某个父组件的模板中重用HeroDetailComponent。 查看应用程序结构 确认您具有以下结构: ?

1.7K10

选择大于努力,你必须了解web1.0到web2.0三段历史

2004年,Google发布了Gmail,用户可以在刷新页面的情况下进行复杂的交互,之后,Ajax逐渐成为网页开发的技术标准,也不断地被应用于各种网站。...前端三大框架 现代前端框架都是是利用数据驱动页面,但是怎么处理数据的变化,各个框架走出了不同的路线。 这些框架要回答的核心问题就是,数据发生变化后,我们怎么去通知页面更新。...各大框架在这个步骤上,各显神通: Angular1就是最老套的脏检查。所谓的脏检查,指的是Angular1在对数据变化的检查上,遵循每次用户交互时都检查一次数据是否变化,有变化就去更新DOM这一方法。...这个方法看似简单粗暴,但算是数据驱动页面早期的实现,所以一经推出,就迅速占领了前端市场。...这种形式不仅让性能有个很好的保障,我们还多了一个用JSON来描述网页的工具,并且让虚拟DOM这个技术脱离了Web的限制。因为积累了这么多优势,虚拟Dom在小程序,客户端等跨端领域大放异彩。

1.2K10

【17】进大厂必须掌握的面试题-50个Angular面试

积极的支持和频繁的新更新 2.什么是Angular?...Angular中的模板是什么? Angular中的模板是使用包含特定于Angular的元素和属性的HTML编写的。这些模板与来自模型和控制器的信息结合在一起,进一步渲染这些信息以向用户提供动态视图。...在Angular中,数据绑定有四种形式: 字符串插值 属性绑定 事件绑定 双向数据绑定 13.在Angular中使用过滤器的目的是什么?...等] 直接在控制器之间[ ControllerAs或其他继承形式] 19. service()和factory()有什么区别?...ngOnChanges:每当组件的任何输入属性发生更改或更新时,都将调用它。 ngOnInit:每次初始化给定组件时都会调用它。

41.1K51

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

4.1.2、模板绑定语法 在 angular 应用中,组件扮演着控制器或是视图模型的作用,在创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件中...,可以通过 angular 内置的模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们的应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中的属性值或者是模板上的数据通过模板表达式运算符进行计算...'font-style': 'italic', 'font-weight': 'bold', 'font-size': '24px' }; } } 通过在组件的属性中设置多个内联样式对象的形式...非空断言运算符用来告诉编译器对特定的属性不做严格的空值校验,当属性值为 null or undefined 时,抛错误。...五、组件的生命周期钩子函数 当 angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过在组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

15.8K30

angular基础面试题_java web面试题

}) 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令...angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。...如果此次digest循环有更新,那么会再次触发digest循环,直到所有的watch都没有更新为止。 使用Angular 2,和使用Angular 1相比,有什么优势?...通过限制api,选择使用已知或安全环境/浏览器的app来防止XSRF攻击、 Angular变化监测 : event:绑定event事件,数据变化视图更新 timeout,延迟触发 版权声明:本文内容由互联网用户自发贡献...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

13K50

进阶 | 重新认识Angular

然后引擎会利用Dom API(attributes, getAttribute, firstChild… etc)层级的从这个原始Dom的属性中提取指令、事件等信息,继而完成数据与View的绑定,使其”...以上内容参考:《一个对前端模板技术的全面总结》 ---- 数据更新Diff 框架的数据更新: React => 虚拟DOM Vue => getter/setter Angular => 脏检查 React...Promise需要调用then或者catch才能够执行,catch是另一种形式的then,调用then或者catch之后,它返回一个新的Promise,这样新的Promise也可以同样被调用,所以可以做成无限的...Angular的经常性兼容、断崖式升级,或许对开发者不大友好。 但它对新事物的接纳吸收、勇于颠覆自身,是面向未来开发的好榜样。 我们也何尝不是,为何要死守某个框架、某种语言,或是争好坏、分高下。...与其进行口水之争,取精辟,去糟粕,更是面向未来的方式吗? 参考 《Angular的变革》 《Angular2 脏检查过程》 《预 (AoT) 编译器》 扫码下方二维码, 随时关注更多前端干货文章!

2.5K10

2020vue面试题及答案_人际关系面试题及答案

在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。...Vue的虚拟DOM节点) 详情步骤: ⾸先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式...另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。...组件之间传值方式不同:Angular 中直接的父子组件,父组件可以直接访问子组件的 public 属性和方法,也可以借助于@Input 和 @Output 进行通讯。...⼼点 数据驱动,组件系统 数据驱动:ViewModel,保证数据和视图的⼀致性 组件系统:应⽤类UI可以看做全部是由组件树构成的 44、delete和Vue.delete删除数组的区别 delete只是被删除的元素变成了

8.7K20
领券