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

Angular 7-对于具有未指定名称属性的表单控件,没有值访问器

Angular 7是一种流行的前端开发框架,用于构建现代化的Web应用程序。它提供了丰富的功能和工具,使开发人员能够轻松地构建高性能、可扩展和可维护的应用程序。

对于具有未指定名称属性的表单控件,没有值访问器是指在Angular中,如果一个表单控件没有指定名称属性,那么它将无法通过表单控件的值访问器来获取或设置其值。

值访问器是Angular中用于获取和设置表单控件值的机制。通常,我们可以通过在模板中使用双向绑定或使用FormControl对象来获取和设置表单控件的值。但是,如果一个表单控件没有指定名称属性,那么它将无法通过这种方式来访问其值。

在这种情况下,我们可以通过使用Angular的ViewChild装饰器来获取对该表单控件的引用,并直接访问其值。ViewChild装饰器允许我们在组件中获取对模板中的元素或指令的引用。

以下是一个示例,演示了如何使用ViewChild来获取对具有未指定名称属性的表单控件的引用:

在模板中:

代码语言:txt
复制
<input #myInput type="text">
<button (click)="getValue()">获取值</button>

在组件中:

代码语言:txt
复制
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @ViewChild('myInput', { static: false }) myInput: ElementRef;

  getValue() {
    console.log(this.myInput.nativeElement.value);
  }
}

在上面的示例中,我们使用ViewChild装饰器来获取对具有未指定名称属性的输入框的引用。然后,在getValue方法中,我们可以通过访问nativeElement属性来获取输入框的值。

对于这个问题,腾讯云没有特定的产品或服务与之相关。然而,腾讯云提供了一系列与前端开发和云计算相关的产品和服务,例如云服务器、云存储、云数据库等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)来了解更多关于腾讯云的信息。

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

相关·内容

AngularDart4.0 指南- 表单

请注意,您还为标记添加了一个ngControl指令,并将其设置为“name”,这对于英雄名字是有意义。 任何唯一将会这样做,但使用描述性名称是有帮助。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件是否改变,或者该是否失效。...touched和untouched指示控件是否被访问过。 valid反映了控制有效性。 样式控件 有效控制属性是最有趣,因为当一个控制无效时,你想发送一个强烈视觉信号。...刷新浏览,然后按照下列步骤操作: 1.看看名字输入。 它有一个绿色边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。...输入控件(通过模板引用变量访问valid 属性,用于检查控件有效性以及显示/隐藏错误消息。 NgForm.form有效性来设置提交按钮启用状态。

17.4K30

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

4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件上添加上原生 HTML 表单验证来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...,一个 FormControl 类实例对应于一个表单控件,在使用时,通过将控件实例赋值给属性,后续则可以通过监听这个自定义属性来跟踪表单控件和状态 import { Component, OnInit...通过使用 FormControl 控件 value 属性,可以获得当前表单控件一份数据拷贝,通过 setValue 方法则可以更新表单控件 import { Component, OnInit...同模板驱动表单数据有效性验证相同,在响应式表单中同样可以使用原生表单验证,在设定规则时,需要将模板中控件名对应数据第二个参数改为验证规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证函数添加到对应...4.4、表单自定义数据验证 4.4.1、自定义验证 在很多情况下,原生验证规则无法满足我们需要,此时需要创建自定义验证来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后将方法作为参数添加到控件定义处即可

18.9K20

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

组件封装 由于 Angular 为所有默认原生控件提供了控件访问,所以在封装第三方插件或组件时,需要写一个新控件访问。...当然我们也可以使用 ngOnChanges 生命周期钩子来追踪输入属性 value 变化,一旦其变化,我们就将该设置为 slider 控件。...实现自定义控件访问 实现自定义控件访问并不难,只需要两步: 注册 NG_VALUE_ACCESSOR 提供者 实现 ControlValueAccessor 接口 NG_VALUE_ACCESSOR...所有表单指令都是使用NG_VALUE_ACCESSOR 标识来注入控件访问,然后选择合适访问(译者注:这句话可参考这两行代码,L175 和 L181)。...要么选择DefaultValueAccessor 或者内置数据访问,否则 Angular 将会选择自定义数据访问,并且有且只有一个自定义数据访问(译者注:这句话参考 selectValueAccessor

3.7K20

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

模板语句通常包含一个接收,它响应事件执行一个动作,例如将HTML控件存储到模型中。 绑定通过一个名为$event事件对象来传递关于该事件信息,包括数据。 事件对象形状由目标事件决定。...Angular为所有基本HTML表单元素提供访问,Forms指南展示了如何绑定到它们。...heroForm是什么? heroForm是一个Angular NgForm指令引用,可以跟踪表单中每个控件和有效性。 原生元素没有form属性。...指令名很少描述属性作用。 myClick指令名称对于发出点击消息属性不是一个好名字。 幸运是,您可以创建符合常规期望属性公共名称,同时在内部使用不同名称。...对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入并返回一个转换后

29.9K20

Angular 6.x 表单快速入门

install -g @angular/cli 创建新项目 $ ng new project-name 启动本地服务 $ cd project-name $ ng serve Angular 表单简介...目前 Angular 支持内建 validators 如下: required - 设置表单控件是非空 email - 设置表单控件格式是 email min - 设置表单控件最小 max...- 设置表单控件最大 minlength - 设置表单控件最小长度 maxlength - 设置表单控件最大长度 pattern - 设置表单控件需匹配 pattern 对应模式...表单控制状态: valid - 表单控件有效 invalid - 表单控件无效 pristine - 表单控件未改变 dirty - 表单控件已改变 touched - 表单控件已被访问过 untouched...表示控件已改变 Name控件touched状态:{{userName.touched}} - 表示控件已被访问过 Name控件untouched状态:{

4.6K20

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件集合 HTML控件     一下HTML input 元素被称为HTML 控件:         input 元素         ...novalidate 属性在应用中不是必须,但是你需要在 AngularJS 表单中使用,用于重写标准 HTML5 验证。...AngularJS输入验证     AngularJS表单控件可以验证输入数据。 输入验证     AngularJS表单控件可以提供验证功能,并对用户输入非法数据惊醒警告。...表单没有填写记录 AngularJS API AngularJS 全局API     AngularJS 全局API 用于执行常见任务JavaScript 函数集合,       比较对象       ...迭代对象       转换对象       全局 API 函数使用 angular 对象进行访问

2K70

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。....内置验证 min 此验证要求控件大于或等于指定数字 max 此验证要求控件小于等于指定数字 required 此验证要求控件具有非空 requiredTrue 此验证要求控件为真...email 此验证要求控件能通过 email 格式验证。...minLength 此验证要求控件长度大于等于所指定最小长度。当使用 HTML5 minlength 属性时,此验证也会生效。...maxLength 此验证要求控件长度小于等于所指定最大长度。当使用 HTML5 maxLength 属性时,此验证也会生效。 pattern 此验证要求控件匹配某个正则表达式。

2.8K50

常用表单元素有哪些_h5新增表单元素属性

可设置type属性,从而具有不同功能。 6. textarea: 定义文本域(一个多行输入控件),默认可通过鼠标拖动调整大小。 7. button: 定义一个按钮。...…… name : 表单名称;action : 用来指定表单处理程序位置(url);method : 定义表单结果从浏览传送到服务方式...,默认为”get”(也可以是post) name:控件名称;value:input控件默认文本;size:input控件在页面中显示宽度...7. reset:重置按钮,会重置当前表单中全部内容。 8. image:图像形式提交按钮,写法是“”。 9. hidden:隐藏域,隐藏字段对于用户是不可见。...7. autocomplete:浏览是否根据之前提交输入情况对此input自动填(即以option形式匹配之前输入),取值on或off,默认on。

3.4K30

HTML 表单和约束验证完整指南

属性定义图像按钮 month 月份和年份选择 number 数字输入字段 password 带有模糊文本密码输入字段 radio 一个单选按钮 range 滑块控件 reset 将所有表单输入重置为其默认按钮...inputmode 数据类型提示 list 自动完成选项ID max 最大 maxlength 最大字符串长度 min 最小 minlength 最小字符串长度 name 提交给服务控件名称...for属性将字段链接到标签: your name 标签对于访问性很重要...:focus-visible 由于键盘导航,元素具有焦点,因此需要焦点环或更明显样式 :required 具有required属性字段 :optional 没有required属性字段 :valid...属性字段 :enabled 没有disabled属性字段 :read-only 具有read-only属性字段 :read-write: 没有read-only属性字段 :checked 选中复选框或单选按钮

8.2K40

JavaScript(十三)

用户单击重置按钮重置表单时,会触发 reset 事件,利用这个机会,我们可以在必要时取消重置操作。 表单字段 可以像访问页面中其他元素一样,使用原生 DOM 方法访问表单元素。...共有的表单字段属性 表单字段共有的属性和方法如下: disabled: 布尔,表示当前字段是否被禁用 form: 指向当前字段所属表单指针,只读 name: 当前字段名称 readOnly: 布尔...selectedIndex: 基于 0 选中项索引,如果没有选中项,则为 -1 size: 选择框中可见行数,等价于 HTML 中 size 特性 选择框 value 属性由当前选中项决定...,相应规则如下: 如果没有选中项,则选择框 value 属性保存空字符串 如果有一个选中项,而且该项 value 特性已经在 HTML 中指定,则选择框 value 属性等于选中项 value...即使 value 特性是空字符串,也同样遵循此条规则 如果有一个选中项,但该项 value 特性在 HTML 中未指定,则选择框 value 属性等于该项文本 如果有多个选中项,则选择框 value

3.3K20

angularjs 表单验证

ng对此也提供了非常棒解决方案,表单属性可以在其所属$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中表单属性。...借助这些属性,我们可以对表单做出实时响应。 可以使用formName.inputFieldName.property格式访问这些属性。 修改表单 布尔型属性,当且仅当用户实际已经修改表单。...用下面的语法访问这个属性 formName.inputfieldName.$error 如果验证失败,这个属性为true;如果为false,说明输入字段通过了验证。 <!...$error $error对象中保存着没有通过验证验证名称以及对应错误信息。  $pristine $pristine是布尔型,可以告诉我们用户是否对控件进行了修改。  ...当有错误时值为false,没有错误时值为true。 $invalid $invalid可以告诉我们当前控件中是否存在至少一个错误,它和$valid相反。

6.6K70

如何使用WijmoJS 纯前端设计,快速生成 Angular 应用

例如,如果将allowResizing属性从Columns更改为None,则网格渲染中没有视觉差异,因为这是运行时行为设置。...对于具有集合控件(例如网格列),设计允许您添加,删除和修改单个成员。 在“属性”窗格中找到columns属性,然后单击属性编辑右侧“显示项目”按钮以显示Angular标记中定义八个列。...但是,您应该知道扩展会记住调用它Angular标记文档范围。 如果随后修改了原始源文件,则应重新访问CodeLens链接以刷新关联设计选项卡。...单击设计左上角WijmoJS 徽标以打开菜单。 “工具箱”命令打开一个可折叠WijmoJS 前端控件面板,按模块名称(网格,图表,输入,仪表,导航,olap)分组。...项目中,控件属性通常绑定到运行时数据成员而不是文字

5.3K40

Django 定义模型2.1

定义模型 在模型中定义属性,会生成表中字段 django根据属性类型确定以下信息: 当前选择数据库支持字段类型 渲染管理表单时使用默认html控件 在管理站点最低限度验证 django...导入from django.db import models 通过models.Field创建字段类型对象,赋值给属性 对于重要数据都做逻辑删除,不做物理删除,实现方法是定义isDelete属性,类型为...):字符串,默认表单样式是 TextInput TextField:大文本字段,一般超过4000使用,默认表单控件是Textarea IntegerField:整数 DecimalField(max_digits...blank:如果为True,则该字段允许为空白,默认是 False 对比:null是数据库范畴概念,blank是表单验证证范畴 db_column:字段名称,如果未指定,则使用属性名称 db_index...访问id:对象.属性_id heroinfo.book_id 元选项 在模型类中定义类Meta,用于设置元信息 元信息db_table:定义数据表名称,推荐使用小写字母,数据表默认名称 <app_name

1.2K30

HTML5表单及其验证

1.输入型控件 Input type 用途 说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值输入域 属性 描述 max number 规定允许最大 min...表单新特性和函数 2.1 placeholder 当用户还没有输入时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,...类型 作用 on 该字段无需保护,可以被保存和恢复 off 该字段需要保护,不可以保存 unspecified 包含默认设置,如果没有被包含在表单中或没有指定,则行为表现为on 如...,再次访问,name输入框会提示你曾输入,而email则不会提示。...目前任何表单元素都有八种可能验证约束条件: 名称 用途 用法 valueMissing 确保控件已填写 将required属性设为true, <input type="text"required

1.7K40

django_2

定义属性 概述 ·django根据属性类型确定以下信息 ·当前选择数据库支持字段类型 ·渲染管理表单时使用默认html控件 ·在管理站点最低限度验证 ·django...·注意 ·null是数据库范畴概念,blank是表单验证证范畴 ·db_column ·字段名称,如果未指定,则使用属性名称 ·db_index ·若为 True...语法:属性名称__比较运算符= Person.objects.filter(p_age__gt=18) 条件 属性__操作符=临界 gt great than gte...概述 ·django根据属性类型确定以下信息 ·当前选择数据库支持字段类型 ·渲染管理表单时使用默认html控件 ·在管理站点最低限度验证 ·django...·如果为True,则该字段允许为空白,默认是 False ·注意 ·null是数据库范畴概念,blank是表单验证证范畴 ·db_column ·字段名称,如果未指定,则使用属性名称

3.6K30

如何使用纯前端控件集 WijmoJS 中可视化在线设计

WijmoJS Designer允许用户创建控件实例,指定属性和事件,并生成可以合并到应用程序中相应HTML 和 Java。WijmoJS 在线Web设计对于开发网格和图表等复杂对象特别有用。...日历控件现在显示当年月份全名 单击“属性”选项卡右侧箭头图标以显示“事件”窗格,该窗格显示所选控件公开每个事件切换按钮。对于打开每个事件,WijmoJS 设计将自动生成事件Java代码。...标签,自动生成用于WijmoJS设计支持任何纯前端控件组合标签。您可以省略大量不需要模块引用。 标签,对于在设计中创建每个控件,均包含默认为空标记。...对Calendar构造函数调用指定了一个包含formatMonths和monthView属性修改参数。但是,InputDateTime构造函数没有参数,因为没有更改属性。...请注意,它具有latestPrice绑定,对应于数据源中实际字段名称。 name属性(在图表图例中显示)具有适当大小写和单词之间空格。

5.8K20

Angular6自定义表单控件方式集成Editormd

ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...(isDisabled: boolean): void; } writeValue:在初始化时候将formControl传递给原生表单控件(即,将模型中写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件Angular表单控件能够保持一致原理,可以看下... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑,支持NgModel

5.2K20
领券