首页
学习
活动
专区
工具
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 从入坑到挖坑 - 表单控件概览

    /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 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 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
    领券