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

如何将格式化的值显示为用户类型,但将原始值发送到Angular 4 formControl进行验证和formControl值?

在Angular 4中,可以使用自定义管道来实现将格式化的值显示为用户类型,同时将原始值发送到formControl进行验证和存储。

首先,创建一个自定义管道,用于将原始值转换为用户类型的格式化值。可以使用@Pipe装饰器来定义一个管道,并实现PipeTransform接口的transform方法。在transform方法中,可以根据需要进行格式化操作。

代码语言:txt
复制
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatValue'
})
export class FormatValuePipe implements PipeTransform {
  transform(value: any): any {
    // 根据需要进行格式化操作
    // 返回格式化后的值
  }
}

接下来,在模板中使用该管道来显示格式化后的值。可以使用管道名称和管道符号(|)将原始值传递给管道。

代码语言:txt
复制
<p>格式化值: {{ originalValue | formatValue }}</p>

然后,创建一个表单控件(formControl)来处理验证和存储原始值。可以使用FormControl类来创建一个表单控件,并在模板中使用formControlName指令将其与表单关联起来。

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    myControl: new FormControl()
  });
}

最后,将原始值发送到表单控件进行验证和存储。可以使用setValue方法将原始值设置为表单控件的值。

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    myControl: new FormControl()
  });

  setOriginalValue(originalValue: any) {
    this.myForm.get('myControl').setValue(originalValue);
  }
}

这样,就可以将格式化的值显示给用户,同时将原始值发送到Angular 4的formControl进行验证和存储。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议查阅腾讯云官方文档或咨询腾讯云客服获取相关信息。

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

相关·内容

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

数据一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板中,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 在根模块中引入 FormsModule...4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件上添加上原生 HTML 表单验证器来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...类实例对应于一个表单控件,在使用时,通过控件实例赋值给属性,后续则可以通过监听这个自定义属性来跟踪表单控件状态 import { Component, OnInit } from '@angular...,然后控件组中每一个控件作为属性添加到实例中 import { Component, OnInit } from '@angular/core'; // 引入 FormControl FormGroup...使用 FormBuilder 构建控件,每个控件名对应都是一个数组,第一个控件默认,第二项第三项则是针对这个设定同步、异步验证方法 import { Component, OnInit

18.9K20

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

FormControl ControlValueAccessor 如果你之前使用过 Angular 表单,你可能会熟悉 FormControlAngular 官方文档将它描述追踪单个表单控件有效性实体对象...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你在 html 使用表单控件,你需要知道任何一个自定义表单控件都可以 formControl 指令进行交互,而不是原生表单控件如...任何一个组件或指令都可以通过实现 ControlValueAccessor 接口并注册 NG_VALUE_ACCESSOR,从而转变成 ControlValueAccessor 类型对象,稍后我们一起看看如何做...写法是如何把 input 控件每次更新传给回调函数,L52 L89);使用 registerOnTouched 方法来注册用户控件交互时触发回调(译者注:你可能会参考 L95)。...表单控件是如何数据同步(译者注:作者贴可能是 Angular v4.x 代码,v5 有了点小小变动,基本相似): export function setUpControl(control: FormControl

3.7K20

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

(isDisabled: boolean): void; } writeValue:在初始化时候formControl传递给原生表单控件(即,模型中写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...明确来说,那些原生表单控件都有其对应ControlValueAccessor,比如: - DefaultValueAccessor - 用于 text textarea 类型输入控件 - SelectControlValueAccessor...指令调用了setUpControl函数来实现formControlControlValueAccessor之间交互。...4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑器,支持NgModel双向绑定

5.2K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库中FormGroup, FormControl,FormArray...等数据视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,在html中使用 NgForm 指令后数据表单进行绑定,使用[(ngModel...)]来表单数据和和视图进行双向绑定,NgForm 指令 form 增补了一些额外特性。...) 表单验证 同步验证异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

Ionic3 表单处理

在项目中,可以使用angular @angular/forms模块处理表单,但是并不需要在app.module中引用@angular/forms模块,因为在app.module中已经引入了@angular...也就是说,引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供组件等内容。...使用过程 从@angular/forms中引入需要用到内容 import {FormBuilder, Validators, FormGroup} from '@angular/forms'; 对应表单初始化如下...params).then(result => { //xxx }).catch(error => { //xxx }); } ngSubmit 是一个@output属性,表单以键值对方式组装成一个对象返回...info}} 当校验不通过时候,就会在这个div上显示 在 login.ts 中定义 提示信息。 以下是测试结果,仔细看 ?

1.3K10

Angular 自定义属性指令

该示例中定义了两个自定义指令: CreditCardDirective —— 信用卡指令,用于对输入 16 位信用卡号码,格式化显示(每 4 位数字一组,中间用空格符分隔)。...,即每 4 位数字一组,中间用空格符分隔。...要实现该需求,前提是我们能监听输入框 input 事件,然后获取该输入框,在对输入数字进行格式化处理。...这里有个问题,当用户在输入框输入非数值类型时候,我们希望能提醒用户。最简单方式,就是给当前输入框设置一个红色边框。要实现这个功能,我们可以利用 HostBinding 装饰器。...下面我们再来该指令新增两个方法,用于控制新建 div 元素显示隐藏: hide() { this.tooltipElement.classList.remove('tooltip--active

2K30

Angular2 :从 beta 到 release4.0 版本升级总结

/commom'; => import {FormControl} from '@angular/forms'; 原使用[ngFormModel]属性 更改表单属性 [ngFormModel] [...form>内使用#url="ngForm"来进行验证,需更改验证url.valadmgform.controls.url.valid 原使用ngForm 更改表单内input属性ngControl=...进行静态引导.静态方案可以生成更小,启动更快应用,默认优先使用。此处因为有些动态计算环境代码,故编译失败,此处手动关闭。 5....升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航状态定位失效 原因:升级后,routercomponenthook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...'red' : ''}}"内嵌样式失效。 原因:angular(v4.1.1)中,需使用[ngStyle]属性方式对样式进行设置。

8.1K00

当nz-checkbox-group多选框组遇上必选校验

,最开始用是响应式表单验证+响应式表单验证,结果总是无法达到预期效果。...结果发现 初始时:1、false,2、false,3、oneOption中4、false 选择一个选项后:1、true,2、false,3、oneOption中+选中value,4、false...从而始终无法触发显示 “通知范围必选” 第一次尝试 最开始尝试是this.validateForm.value.scopes在提交时先赋值[],再检测checked状态,赋值。...再次尝试 到这曾一度想过放弃然后自己用原始方式写,再一想到原始方式还要自己考虑样式什么,作为一个有着css恐惧症Java程序猿我决然地选择了硬着头皮在啃会儿。...nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定 NgControl组件表单校>验函数校验过程异步返回结果显示对应error | validating

4.3K20

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式动态表单框架,不仅支持自动生成表单、易于上手自定义字段扩展、自定义验证扩展、支持 Formly Schema JSON Schema,还有开箱即用内置表单主题...-g @angular/cli # 创建 standalone 类型项目 ng new angular-ngx-formly --standalone=false 安装 NG-ZORRO 组件库...: 推荐使用 angular-cli 提供 ng add 进行安装配置: # 1....required: true, pattern: /^[\u4e00-\u9fa5]+$/, }, } 字段添加自定义验证消息: 到目前不通过验证字段仅仅是通过边框颜色改变区分,现在就为字段添加自定义验证消息...定义类型 FormlyExtension 对象,在 prePopulate 时进行 label 字段匹配: import { FormlyExtension } from '@ngx-formly/

44210

使用原生 JavaScript 手写一个高效表单验证系统

项目需求 我们需要实现一个注册表单,其中包括以下几个字段: 用户名 邮箱 密码 确认密码 表单需要进行以下验证: 所有字段都是必填项。 用户名长度应在3到15个字符之间。...密码确认密码必须匹配。 案例展示 以下是我们实现表单页面截图: 如何实现 我们将使用HTML、CSSJavaScript来实现这个表单验证功能。首先,让我们看看HTML代码: <!...表单样式:定义表单容器、标题、表单控件按钮样式。 表单验证样式:使用CSS类显示输入框成功错误状态。...显示错误信息:showError函数用于显示错误信息,改变表单控件样式并显示具体错误信息。 显示成功信息:showSuccess函数用于显示成功信息,改变表单控件样式成功状态。...事件监听:表单添加提交事件监听器 知识点总结 表单验证:了解如何使用JavaScript进行表单验证,确保用户输入数据是有效。 正则表达式:学习如何使用正则表达式验证邮箱格式。

10710

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

模板驱动表单依赖FormsModule,数据驱动表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动方式,好维护理解。。...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单亦或者校验 一个最简单例子...=》 可以理解获取且可以操作整个表单数据 FormBuilder:表单数据构建工具[构建初始表单],简化构建代码(包括了new FormGroup(),new FormControl(),new...// v4+ , 第一位''代表这个元素初始化构建,类似未输入状态 // 'UserName': ['', Validators.compose([Validators.minLength...(6)] // Validators可选参数 // 1. required :必须验证,返回布尔 // 2. minLength : 最小长度 // 3. maxLenght: 最大长度

3.8K20

Reactjs+BootStrap开发自制编程语言Monkey编译器:词法解析1

我们先看一句简单代码: let x = y + 5; 编译器在解析这条语句前,它需要做一项分析工作,它会把上面的语句各个要素进行分类如下: 1:let 2: x , y 3:= 4:+, 5:5 6:...‘5’组成集合;第六组是符号’;’独自组成一个集合;为了区分不同集合,我们每一个集合赋予一个不同,第一组赋值0,第二组赋值1,依次类推,第六组赋值5。...,’3’三个字符,然后把这三个字符组合成字符串”123”,最后给这个字符串创建一个类型INTEGERToken对象。...例如上面代码中,夹在尖括号中组件叫bootstrap.FormControl, 那么reactjs在解析到上面代码时,会自动调用bootstrap.FormControl.render(),于是一个输入文本框就会显示到页面上了..., 第二行数字6,它对应Token中,分类4,对应到代码中是NUMBER,并且它所在行号是1,从这两处结果看,词法解析结果基本正确。

2.5K10

React 应用架构实战 0x2:构建和文档化组件

这种范式允许我们将用户界面拆分成更小部分,从而更容易开发应用程序。它还启用了组件可重用性,因为我们可以在多个地方重复使用相同组件。...# Chakra UI 当我们应用程序构建 UI 时,必须决定使用什么来组件设置样式。此外,我们还必须考虑是从零实现所有组件还是使用带有预制组件组件库。...,并且可以在自定义主题中进行配置,我们可以将其传递给 provider ,它将覆盖默认主题配置。...还定义了我们希望在组件中使用主题颜色。然后,使用 extendTheme 这些配置与默认主题组合在一起,它将合并所有配置并为我们提供完整主题对象。...集中主题配置非常有用,因为如果应用程序品牌发生变化,它很容易使用更改。例如,我们可以轻松地在一个地方更改主色,并将其应用于整个应用程序,而无需进行任何其他更改。

80110

【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计

表单控件基础需求: 可以依赖 JSON 渲染。 依赖 JSON 创建 model。 便于用户输入数据。 验证用户输入数据。 便于程序员实现功能。 可以多列。 可以分栏。 可以自定义扩展。 其他。...*/ [key: string | number]: Array } ILinkageMeta:组件联动接口 有时候需要根据用户选择显示对应一组组件,那么如何实现呢?...其实也比较简单,还是做一个key-value ,字段作为key,需要显示字段ID集合作为value。这样就可以了。.../** * 显示控件联动设置 */ export interface ILinkageMeta { /** * 控件ID作为key,每个控件对应一个数组,数组里面是需要显示控件ID...定义 interface 可以比较清晰表明结构意图,然后实现接口即可。避免过段时间自己都忘记含义。 JSON 文件导入后会自动解析 js 对象,那么还用 interface 做什么?

2.4K10

使用 React ethers.js 构建DApp

当连接时,按钮文本是连接账户地址。用户可以点击断开连接。 我们获得当前账户 ETH 余额并显示在页面上,以及区块链网络信息。 有关于连接 MetaMask 以太坊文档(文档链接[12])。...用户在 MetaMask 弹出窗口确认或拒绝该请求。 返回账户设置currentAccount。 当断开连接被调用时,我们重置 currentAccount 余额。...我们允许用户与新部署 ERC20 代币智能合约--ClassToken(CLT)进行交互。...数据是根据其类型进行编码。 ERC20 智能合约是一个标准,我们将使用一个文件而不是 Hardhat 项目中输出编译工件。我们添加是人类可读 ABI[18]。...综上所述,DAPP 有三个部分: 智能合约区块链 Web 应用(用户界面),通过智能合约获取设置数据 用户控制钱包(这里是 MetaMask),作为资产管理工具用户签名者,以及区块链连接器。

5.2K30
领券