Angular [(ngModel)]的ng-dirty设置时机

下图name input field的实现：

<label>name:<input [(ngModel)]="hero.name" placeholder="name"/></label>

没有输入任何数据时，class为：ng-untouched ng-pristine ng-valid

输入数据后，class变为：ng-valid ng-dirty ng-touched

这些class是什么时候设置的呢？在Chrome开发者工具里选中input element，激活Break On->Attribute modifications, 然后输入值，断点即可触发：

可以看到一大堆以refresh开头的Angular框架方法，这些就是Angular视图change detect的实现：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular [(ngModel)]的ng-dirty设置时机相关推荐

Angular ng-model指令详解
Angular ng-model指令详解声明将输入域的值与 AngularJS 创建的变量绑定双向数据绑定表单验证自定义类样式常用应用状态声明本文根据菜鸟教程整理 http://www ...
Angular CLI 全局 ng.cmd 文件内容分析
文件内容如下: REM Jerry ::这是注释 @ECHO off SETLOCAL CALL :find_dp0IF EXIST "%dp0%\node.exe" (SET & ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
Angular 范例集 ng showcase
ng showcase 详细介绍这是一个基于angular的界面元素范例程序,基于bootstrap 3框架,优先使用内置指令来完成. 其目标是做一个类似smartclient等控件包的showca ...
angular 控件css_Angular 4 设置组件样式的几种方式
你用Angular吗? 一.介绍如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们 ...
使用Angular cli（ng generate）创建组件、服务、类、路由、指令、管道
日常angular开发中,相信不少人在创建新组件时,普遍会采用复制粘贴的方式创建新的组件或服务等.其实可以采用ng generate的方式快速创建组件.服务.类.路由等. 在使用angular cli ...
Angular Component ngOnInit和ngAfterViewInit调用时机的讨论
ngOnInit 在refreshView里,ngOnInit当成是PreOrderHooks来执行: 而ngAfterViewInit的调用时机:在ngOnInit之后,注释里写得比较清楚. 其中红 ...
（转载）关于My97 datepicker与Angular ng-model绑定问题解决。
转载自 http://zerosoft.blog.51cto.com/679447/1611403 <input type="text" ng-model="d&q ...

Angular [(ngModel)]的ng-dirty设置时机

Angular [(ngModel)]的ng-dirty设置时机相关推荐

最新文章

热门文章