【PaletX】ui组件使用

表单

当表单不是以component和template形式时,不需要patchValue重新赋值
srcObj用于赋值表单初始值

表单校验

优先级:输入过程中的校验 > 焦点离开后的校验 > 点击确定按钮后的校验
适用场景:
输入过程中的校验:焦点进入输入框时系统开始校验,发现错误立即提示,这种方式适用于非法字符,长度超限等的校验。
焦点离开后校验:焦点离开输入框后,立即对该项进行校验。这种方式适用于必填项或者无法在输入过程中校验的情况,如长度过短,格式不符等。
点击确定按钮之后校验:对有错的输入项进行错误提示,并且页面焦点自动定位到表单第一个错误处。
a.必填项校验。
b.客户端无法完成的校验。

自定义校验方法

 fieldSet: [{fields: [{name: 'id5',label: this.translate.get('id'),validators: [Validators.max(60), Validators.min(0)],validateInfos: {max: this.translate.get('inputRange60'),min: this.translate.get('inputRange60')},maxLength: 20,type: FieldType.NUMBER,width: '172px',placeholder: this.translate.get('pleaseInputNumber'),required: true,},{name: 'name5',label: this.translate.get('name'),type: FieldType.STRING,placeholder: this.translate.get('customValidPlaceholder'),//notice: '自定义校验很简单的,按照本例代码写就行了',required: true,disabled: false,maxLength: 21,validators: [this.nameExistsValidate(), Validators.maxLength(20)],validateInfos: {nameExists: this.translate.get('nameExist'),maxlength: this.translate.get('atMost20Char')}},]}}public nameExistsValidate(): ValidatorFn {return (control: AbstractControl): { [key: string]: any } => {if (control.value !== undefined && !this.existsMap) {return {};}if (this.existsMap[control.value]) {return {nameExists: true};}return {};};}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/794473.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

类与对象(一)

目录 一、类的引入和定义 二、类的访问限定符及封装 1)访问限定符 2)封装 三、类的作用域和实例化 1)类的作用域 2)实例化 四、类的大小 1)类的大小计算方式 2)特殊的类的大小 五、this指针 1&…

C++设计模式:观察者模式(三)

1、定义与动机 观察者模式定义:定义对象间的一种1对多(变化)的依赖关系,以便当一个对象(Subject)的状态发生比改变时,所有依赖于它的对象都得到通知并且自动更新 再软件构建过程中&#xff0c…

回溯算法|332.重新安排行程 51. N皇后 37. 解数独

332.重新安排行程 力扣题目链接 class Solution { private: // unordered_map<出发机场, map<到达机场, 航班次数>> targets unordered_map<string, map<string, int>> targets; bool backtracking(int ticketNum, vector<string>& result…

蓝桥杯刷题-06-砍树-图遍历DFS⭐⭐⭐⭐

给定一棵由 n 个结点组成的树以及 m 个不重复的无序数对 (a1, b1), (a2, b2), . . . , (am, bm)&#xff0c;其中 ai 互不相同&#xff0c;bi 互不相同&#xff0c;ai ≠ bj(1 ≤ i, j ≤ m)。 小明想知道是否能够选择一条树上的边砍断&#xff0c;使得对于每个 (ai , bi) 满足…

小程序如何设置余额充值和消费功能

小程序中设置余额充值和消费功能非常重要的&#xff0c;通过让客户在小程序中进行余额充值&#xff0c;不仅可以提高用户粘性&#xff0c;还可以促进消费&#xff0c;增加用户忠诚度。以下是如何在小程序中设置余额充值和消费功能的步骤&#xff1a; 1. **设计充值入口**&…

代码随想录-14day:二叉树3

一、二叉树最大深度 最大深度&#xff1a;根节点到最远叶子节点的最长路径上的节点数。 可以使用迭代法和递归法&#xff0c;以递归法为例&#xff1a;还是以递归三要素为基准&#xff0c;进行解决。 int maxDepth(struct TreeNode* root) {// struct TreeNode** NodeList …

【力扣】242. 有效的字母异位词

242. 有效的字母异位词 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s “anagram”, t “nagaram” 输出…

使用js的正则表达式匹配字符串里的url,并对url进行修改后替换原来的url

如果要匹配URL并且对其进行一定的修改后替换原来的URL&#xff0c;你需要一个函数&#xff0c;这个函数可以匹配URL&#xff0c;然后对匹配到的URL进行所需要的修改。下面是一个例子&#xff0c;展示了如何实现这样的功能&#xff1a; function replaceAndModifyUrls(text, mo…

2024.3.22力扣每日一题——网格图中最少访问的格子数

2024.3.22 题目来源我的题解方法一 传统的深度优先遍历 超时方法二 优先队列 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2617 我的题解 方法一 传统的深度优先遍历 超时 直接从(0,0)开始深度优先遍历&#xff0c;直到遍历到(m-1,n-1)截止。 优化成记忆化搜索仍然无…

PyTorch搭建Autoformer实现长序列时间序列预测

目录 I. 前言II. AutoformerIII. 代码3.1 Encoder输入3.1.1 Token Embedding3.1.2 Temporal Embedding 3.2 Decoder输入3.3 Encoder与Decoder3.3.1 初始化3.3.2 Encoder3.3.3 Decoder IV. 实验 I. 前言 前面已经写了很多关于时间序列预测的文章&#xff1a; 深入理解PyTorch中…

关于Idea无法正常启动

编辑这个文件 最后一行 加上 pause 双击文件 会显示报错信息

npm install node-sass报错

前言 在使用 node-sass 时&#xff0c;你可能会遇到安装 node-sass 时出现各种错误的情况。在本文中&#xff0c;我们将探讨一些常见的 node-sass 安装错误&#xff0c;以及如何解决它们。 无论你是初学者还是有经验的开发者&#xff0c;本文都将为你提供有用的信息和技巧&…

Vue学习笔记-S1

1 什么是Vue Vue是一款用于构建用户界面的渐进式JavaScripte框架&#xff0c;可基于数据渲染用户页面. 1.1 Vue的知识架构 Vue核心包&#xff1a;声明式渲染、组件系统Vue构建&#xff1a;客户端路由、状态管理、构建工具局部使用Vue&#xff1a;快速入门、常用指令、生命周…

解读TF存储卡

一、TF简史 TF卡的故事&#xff0c;要从20年前谈起…… 2000年1月&#xff0c;松下闪迪东芝成立SD协会&#xff08;SD Association&#xff0c;简称SDA&#xff09;&#xff0c;专注于制定并推广SD存储卡的产业标准。二十年后的今天&#xff0c;SDA企业会员已发展至800多家&a…

车载电子电器架构 —— 软件下载

车载电子电器架构 —— 软件下载 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无…

Vue依赖注入,详细解析

Prop 逐级透传问题​ 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会使用 props。想象一下这样的结构&#xff1a;有一些多层级嵌套的组件&#xff0c;形成了一颗巨大的组件树&#xff0c;而某个深层的子组件需要一个较远的祖先组件中的部分数据。…

各类聚类算法整理

各类聚类算法整理 0. 先验的基础知识1. K-Means2. GMM3. EM算法4.Spectral Clustering5. Mean Shift6. DBSCAN 本篇将介绍整理各种聚类算法&#xff0c;包括k-means&#xff0c;GMM(Guassian Mixture Models, 高斯混合)&#xff0c;EM(Expectation Maximization&#xff0c;期望…

C#基础知识总结

C语言、C和C#的区别 ✔ 面向对象编程&#xff08;OOP&#xff09;&#xff1a; C 是一种过程化的编程语言&#xff0c;它不直接支持面向对象编程。然而&#xff0c;C 是一种支持 OOP 的 C 的超集&#xff0c;它引入了类、对象、继承、多态等概念。C# 是完全面向对象的&#xff…

第十七题:串的处理(通过率80%)

题目描述 在实际的开发工作中&#xff0c;对字符串的处理是最常见的编程任务。本题目即是要求程序对用户输入的串进行处理。具体规则如下&#xff1a; 把每个单词的首字母变为大写。 把数字与字母之间用下划线字符&#xff08;_&#xff09;分开&#xff0c;使得更清晰 把单…

TCP三次握手过程及抓包分析

TCP三次握手过程 一、TCP分段格式二、TCP三次握手三、Wireshark抓包分析 一、TCP分段格式 二、TCP三次握手 三、Wireshark抓包分析