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

Angular FormControl值实际上包含什么?为什么它与nativeElement值不同?

Angular FormControl是Angular框架中用于处理表单控件的类。它包含了表单控件的值、状态和验证信息。

具体来说,FormControl包含以下属性:

  1. value:表单控件的当前值。
  2. valid:表单控件是否通过了验证。
  3. invalid:表单控件是否未通过验证。
  4. pristine:表单控件是否未被修改过。
  5. dirty:表单控件是否已被修改过。
  6. touched:表单控件是否已被触摸过。
  7. untouched:表单控件是否未被触摸过。
  8. errors:表单控件的验证错误信息。

与FormControl不同,nativeElement值是指直接访问DOM元素的值。在Angular中,nativeElement是通过ViewChild或ElementRef获取的原生DOM元素的引用。它表示了DOM元素的当前值,而不是FormControl的值。

FormControl与nativeElement值不同的原因是,FormControl是Angular框架提供的一种更高级的抽象,用于处理表单控件的值和验证。它提供了更多的功能,例如表单验证、状态管理等。而nativeElement值只是直接访问DOM元素的值,没有这些额外的功能。

总结起来,FormControl是Angular框架中用于处理表单控件的类,包含了表单控件的值、状态和验证信息。与之相比,nativeElement值只是直接访问DOM元素的值,没有FormControl的额外功能。

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

相关·内容

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

网上有大量文章描述如何实现这个接口,但很少说到它在 Angular 表单架构里扮演什么角色,如果你不仅仅想知道如何实现,还想知道为什么这样实现,那本文正合你的胃口。...FormControl 和 ControlValueAccessor 如果你之前使用过 Angular 表单,你可能会熟悉 FormControlAngular 官方文档将它描述为追踪单个表单控件和有效性的实体对象...这个对象桥接原生表单控件和 formControl 指令,并同步两者的。...组件封装器 由于 Angular 为所有默认原生控件提供了控件访问器,所以在封装第三方插件或组件时,需要写一个新的控件访问器。...你可能注意到 formControl 指令实际上简化了与父组件交互的方式。

3.8K20
  • Angular 自定义属性指令

    要实现该需求,前提是我们能监听输入框的 input 事件,然后获取该输入框的,在对输入的数字进行格式化处理。...HostBinding HostBinding 是属性装饰器,用来动态设置宿主元素的属性。...此时,我们的 TooltipDirective 指令,已经包含了控制 tooltip 元素显示和隐藏的方法。那么现在的问题是,我们要如何访问 TooltipDirective 指令的实例。...Angular 表单模块中,也大量使用了 exportAs 属性,比如 ngModel、ngForm、ngModelGroup 及 formControl 指令等。...本文通过 CreditCardDirective 和 TooltipDirective 两个指令,介绍了 Angular 自定义属性指令所涉及的相关的基础知识,若想继续深入学习的话,可以阅读 Angular

    2K30

    Angular ElementRef 简介

    为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer 、抽象类 RootRenderer 等。...通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到...什么情况 ?...为什么添加个 setTimeout 就能成功获取到想要的 div 元素呢?此处就不展开了,有兴趣的读者可以参考 - [What the heck is the event loop anyway?]...我们直接选用 ngAfterViewInit 这个钩子,不要问我为什么,因为它看得最顺眼咯。不过我们后面也会有专门的文章,详细分析一下 Angular 组件的生命周期。

    1.6K60

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

    /core'; // 引入 FormControl 对象 import { FormControl } from '@angular/forms'; @Component({ selector:...通过使用 FormControl 控件的 value 属性,可以获得当前表单控件的一份数据拷贝,通过 setValue 方法则可以更新表单的控件 import { Component, OnInit...} from '@angular/core'; // 引入 FormControl 对象 import { FormControl } from '@angular/forms'; @Component...使用 FormBuilder 构建的控件,每个控件名对应的都是一个数组,第一个为控件的默认,第二项和第三项则是针对这个设定的同步、异步验证方法 import { Component, OnInit...对于模板驱动表单,同样是采用自定义指令的方式进行跨字段的交叉验证,与单个控件的验证不同,此时需要将指令添加到 form 标签上,然后使用模板引用变量来获取错误信息 import { Directive

    18.9K20

    Angular ViewChild和ViewChildren

    细心的读者可能会发现除了更新属性之外,还执行了 this.cd.detectChanges() 这句语句。...ViewChild(AuthMessageComponent) 装饰器来获取 AuthMessageComponent 组件,ViewChild 装饰器除了支持 Type 类型参数外,还支持字符串参数,而字符串的是模板引用的...__: Object 在控制台中展开 nativeElement 属性,你会发现该属性对应的是原生的 DOM 元素,因此我们可以在 ngAfterViewInit 生命周期钩子中执行某些 DOM 操作...但在实际项目中,我们是不推荐直接使用 DOM API 执行 DOM 操作的,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。...为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。

    2.7K20

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的(获取setvalue...,设置字段属性) 表单状态(status) formarray(管理任意数量控件) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol...requiredTrue 此验证器要求控件的为真 email 此验证器要求控件的能通过 email 格式验证。

    2.8K50

    ionic3应该善用组件和指令

    ionic3开发框架是angular4,所以了解一下angular4的一些基础知识,能让你更好的开发应用。...directive 指令名 ionic g component 组件名 要说指令和组件的区别,简单说是不带视图和带视图的区别,直观效果是:一个为原有标签动态添加功能,另一个为新建自定义功能标签,详细上有不少细节上的不同...与其他指令不同,它描述的是一个视图,是用户可以直接看到的东西。 自定义属性指令 实例:创建一个bgColor属性指令,支持传入颜色名参数,设置目标标签的背景色 1)创建指令。...上述指令是一个很简单的指令,且很不灵活,因为颜色写死为red了,实际上我们使用场景应该支持多种颜色。...= color; } } 改动的只是用@Input装饰器修饰,然后用set方法触发获得后的操作。

    3.5K40

    Angular2 之 单元测试

    组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...测试工具进行测试知识点总结 测试工具包含了TestBed类和@angular/core/testing中的一些方法。...为什么没有说花冤枉时间呢?就是因为是自己对单元测试还没哟掌握,所以出了错,不要紧,重要的是以后不能再犯!...---- 多次调用同一个异步方法 相信大家对这段单元测试的代码很熟悉,这里就是模拟多次调用同一个方法时,返回不同。 这里是同步方法的模拟返回数据,那么异步方法同样可以。...bar = value; }, getBar: function() { return bar; } }; // 多次调用时,返回不同

    5.5K20

    Angular DOM 抽象概述

    为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...nativeElement: T; constructor(nativeElement: T) { this.nativeElement = nativeElement; } } 根据 ElementRef...类的定义,我们知道 Angular 内部把不同平台下视图层中的 native 元素封装在 ElementRef 实例的 nativeElement 属性中。...模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。...Angular 没有什么神奇之处,如果你想要插入新的组件或元素,你需要告诉 Angular 在哪里插入新的元素。

    3.5K30

    使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)

    编辑模块 我们看看作者的新建页面用到了什么, 用到了ngx-bootstrap的弹出层。...ElementRef; // 弹出层内的内容 @Output() modalSave: EventEmitter = new EventEmitter(); // 页面间传,...返回列表后也没有自动更新 预览处也没实现实时预览 自动更新也没有实现 发布功能还没有实现 界面不够美观 返回列表更新 这个就要用到angular的父子页面传。...测试父子页面传 实现实时预览 我们之前设计是使用markdown语法来制作这个编辑功能。...预览有了,但是没有实时同步 要实现实时同步,我们使用angularFormControl来帮忙 import { FormControl } from '@angular/forms'; import

    1K30

    Ionic3 自定义指令

    Angular 中有三种类型的指令 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。...selector: '[sxylight]' }) export class SxylightDirective { constructor(private el: ElementRef) { el.nativeElement.style.backgroundColor...') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor...selector: '[sxylight]' 是该指令在外部使用时的名称 @Input 表示一个输入属性,表示可以从父组件传进来 @HostListener 可用于监听事件 ElementRef 可以...这里定义了与 *ngIf 功能相反的指令,即:当条件不成立的时候才会生成对应的 DOM 使用结构指令 因为在上面我们引进导入了 DirectivesModule ,而 DirectivesModule 又包含了现在新创建的这个结构指令

    1.3K30

    【技巧】ionic3如何实现优雅的弹窗动画

    image.png 在了解弹窗动画前,我们先了解下CSS3中动画的基本内容: CSS3 transition 属性 描述 transition-property 规定设置过渡效果的 CSS 属性的名称...其中transition-timing-function 属性规定过渡效果的速度曲线,曲线函数说明如下表所示: 描述 linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier...cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的。可能的是 0 至 1 之间的数值。...image.png 再其中,包含上述链接在内,最有价值的链接是这个: Adding custom transitions/custom modal transition,里面有人针对风险做了回复...wrapper.beforeStyles({ 'opacity': 1 }); 4、基于上述内容,提供简单示范代码如下: import { Animation, PageTransition } from 'ionic-angular

    1.3K30
    领券