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

Angular2 -如何将表单上的`touched`属性设置为true

Angular2是一种流行的前端开发框架,用于构建Web应用程序。在Angular2中,要将表单上的touched属性设置为true,可以使用以下步骤:

  1. 在组件的HTML模板中,使用Angular2的表单指令来创建表单。例如,可以使用ngForm指令来创建一个表单,并使用ngModel指令来绑定表单控件的值。
代码语言:txt
复制
<form #myForm="ngForm">
  <input type="text" name="myInput" [(ngModel)]="myValue">
</form>
  1. 在组件的类中,定义一个属性来表示表单控件的状态。例如,可以使用FormControl类来创建一个表单控件,并使用markAsTouched方法将touched属性设置为true。
代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `
    <form #myForm="ngForm">
      <input type="text" name="myInput" [(ngModel)]="myValue">
    </form>
  `
})
export class MyComponent {
  myValue: string;
  myInputControl: FormControl;

  constructor() {
    this.myInputControl = new FormControl();
  }

  markInputAsTouched() {
    this.myInputControl.markAsTouched();
  }
}
  1. 在需要的时候,调用markAsTouched方法来将表单控件的touched属性设置为true。例如,可以在提交表单或验证表单时调用该方法。
代码语言:txt
复制
<form #myForm="ngForm">
  <input type="text" name="myInput" [(ngModel)]="myValue">
  <button (click)="markInputAsTouched()">Submit</button>
</form>

这样,当用户与表单交互时,例如点击输入框并离开,markAsTouched方法将被调用,将表单控件的touched属性设置为true。

关于Angular2的更多信息和示例,请参考腾讯云的Angular2开发文档和相关产品:

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和情况进行评估。

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

相关·内容

AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能限制 AngularJS当初是提供给设计人员用来快速构建HTML表单一个内部工具。...@Component最重要作用是通过selector属性(值CSS选择符),指定这个组件渲染到哪个DOM对象。 @View最重要作用是通过template属性,指定渲染模板。 3....给一个类 加注解,等同于设置这个类annotations属性: //注解写法@Component({selector:"ez-app"}) class EzApp{...}...,可能隐约会感受到Angular2中bootstrap一些 变化 - 我指并非代码形式变化。...支持多种渲染引擎 以组件而非DOM核心,意味着Angular2在内核隔离了对DOM依赖 - DOM仅仅作为一种可选渲染引擎存在: ?

2.4K10

前端元编程——使用注解加速你前端开发

基本思路 基本思路很简单,就像上图,Model是中心,我们就是借助Decorator和Reflect将CRUD页面所需样板类方法属性元编程在Model。进一步延伸数据驱动UI思路。...借助Reflect Matadata绑定CRUD页面信息到Model属性 借助Decorator增强Model,生成CRUD所需样板代码 Show Me The Code 下文,我们用TypeScript...首先我们有一个函数来生成不同业务属性装饰函数。...Form表单表单,自然就是字段name,label,require,validate,以及提交数据转换。...效果 上文包含了不少代码,但是大部头在如何将元数据转换成为页面组件可用数据,也就是元编程部分。 而业务页面,7行Table页面,40行Form页面,已经非常精简功能完备了。

3.1K20

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

name 属性则是 angular 用来注册控件 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 在表单中使用 ngModel...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以将提交事件绑定到表单 ngSubmit 事件属性,通过模板引用变量形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单提交按钮...,一个 FormControl 类实例对应于一个表单控件,在使用时,通过将控件实例赋值给属性,后续则可以通过监听这个自定义属性来跟踪表单控件值和状态 import { Component, OnInit...formGroup 指令绑定到 form 元素,然后将控件组每一个属性通过 formControlName 绑定到具体对应表单控件 <form [formGroup]='profileForm'...{ 'nameInvalid': true } : null; } } 当实现了继承 validate 方法后,就可以在模板控件添加该指令

18.9K20

Angular 2 表单(下)

每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...状态 true false 时类 控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效 ng-valid...hidden 属性绑定到 name 控件属性,我们就可以控制"name"字段错误信息可见性了。...当我们添加一个新网站时,它把 active 标记设置 false , 然后通过一个快速 setTimeout 函数迅速把它设置true 。...通过 ngSubmit 来提交表单 我们可以使用 Angular 指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法

1.6K10

redux-form学习笔记二--实现表单同步验证

) 5在尚未输入内容时(pristine=true)或在提交过程中(submitting=true),禁止使用提交按钮。...component中,比如以上renderField中 2Field组件name属性和component属性 name属性是Filed组件名称,也即Field下输入框名称,它将成为存储form表单数据.../api/Props.md/ handleSubmit是处理提交一个函数,接收三个参数:values(即上文提到保存表单数据对象),dispatch和props(传递给自定义表单组件属性) pristine...是一个布尔型值,如果表单初始化后尚未输入值,true,否则为false,当你向表单中第一个输入框中输入值时候,pristine就由true转为false了 reset是一个函数,调用reset()...可清空表单 submitting是一个布尔型数值,true表示表单正在提交  运行结果如下: 1--验证是否空 ?

1.8K50

Angular 6.x 表单快速入门

目前 Angular 支持内建 validators 如下: required - 设置表单控件值是非空 email - 设置表单控件值格式是 email min - 设置表单控件值最小值 max...- 设置表单控件值最大值 minlength - 设置表单控件值最小长度 maxlength - 设置表单控件值最大长度 pattern - 设置表单控件值需匹配 pattern 对应模式...,在使用 标签后,我们 username 输入框,必须添加 name 属性。...在 Angular 表单中,若验证通过则会在表单控件添加 ng-valid 类,若验证失败则会在表单控件添加 ng-invalid 类。...表单控制状态: valid - 表单控件有效 invalid - 表单控件无效 pristine - 表单控件值未改变 dirty - 表单控件值已改变 touched - 表单控件已被访问过 untouched

4.6K20

Angular8稳定版修改概述

但这是如何工作? 基本,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...Ivy渲染引擎实验 虽然早在angular 6时候就提出了Ivy,但是Ivy仍处于试验阶段,通过Angular 8版本,您可以通过创建一个enable-ivy标志设置true 应用程序来测试它,如下所示...阅读Angular Doc上有关服务工作者更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...如果要触发一个表单组中所有控件验证,这个方法将是非常有用。...需要注意是,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。 添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。

4.5K20

Angular2 VS Angular4 深度对比:特性、性能

接下来一起了解Angular2这个版本发布原因以及如何将其添加到Web开发中。 ...在这些浏览器构建应用,意味着可以更容易使用Angular进行开发和优化,从而允许开发人员更专注于公司业务实现代码。...由于代码依赖于ES6模块,因此模块加载程序将通过在部分组件引用它们,来加载依赖关系。...记录: Angular 2.0包括一个名为diary.js日志记录服务,这是一个非常有用属性,用于测量开发人员编码投入时间(从而允许开发人员识别代码中瓶颈)。...模板源映射: 每当模板中某些内容出现错误时,都将创建源映射,原始模板提供有意义说明内容。 结论: 对于仍处于学习阶段的人来说,Angular会有点混乱。

8.7K20

Antd Form 实现机制解析

系统架构设计 从 Form 源码看,组件本身并不涉及表单数据流程相关逻辑,Form 组件以及 FormItem 主要处理布局方式、表单样式、属性必填样式、检验文案等视图层面的逻辑。...decorate 会创建一个被 BaseForm 组件包裹自定义表单组件,经过包裹组件将会自带 this.props.form 属性。...应该设为 checked getValueFromEvent 如何从 event 中获取组件值 hidden true 时,校验或者收集数据时会忽略这个字段 ?...,表单组件会自动添加 value(或 valuePropName 指定其他属性) onChange(或 trigger 指定其他属性属性,接下来数据同步将被 Form 接管。...嵌套数据结构收集 FieldStore 内部集成了 lodash/set,可以设置对象路径(eg: a.b.c 或者 a.b[0])字段值,通过使用对象路径字段,我们可以很方便实现嵌套数据结构值收集

2.6K20

AngularDart4.0 指南- 表单

每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单注册控件。 如果您现在运行应用程序并更改每个英雄model属性表单可能会显示如下: ?...touched和untouched指示控件是否被访问过。 valid反映了控制值有效性。 样式控件 有效控制属性是最有趣,因为当一个控制值无效时,你想发送一个强烈视觉信号。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...您可以通过根据名称控制状态设置隐藏属性来控制错误消息可见性。...NgForm指令补充表单元素附加功能。 它包含用ngModel和ngControl指令元素创建控件,并监视它们属性,包括它们有效性。

17.4K30

Vuejs和其他前端框架对比

状态管理 vs 对象属性 如果你对React熟悉,你就会知道应用中状态是(React)关键概念。也有一些配套框架被设计管理一个大state对象,如Redux。...对于后台之类表单应用,还是Ng2有优势。 依赖注入无论你喜不喜欢DI,这就是Angular2强大功能之一。有DI可以在不改变代码结构情况下完成功能替换。...这一点Angular2有原生service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节对标准有更好支持。...也就是说,我们最好比较是 Vue 内核和 Ember 模板与数据模型层: Vue 在普通 JavaScript 对象建立响应,提供自动化计算属性。...在 Ember 中需要将所有东西放在 Ember 对象内,并且手工计算属性声明依赖。

3.8K110
领券