Angular 嵌套表单

1.假设我有一个 “添加用户“ 的需求,在用户的信息中,联系方式分为邮箱和手机号,这两个联系方式就可以作为一个嵌套的内部的表单。下面是实现方式:

<form [formGroup]="userForm">
<input type="text" formControlName = "name">
<div formGroupName="contact"><input type="text" formControlName = "email"><input type="text" formControlName = "mobile">
<div>
<button (click)="form.reset()">Reset</button>
</form>const nameControl = new FormControl(' ', [Validators.required]);
this.userForm = new FormGroup([name:nameControl,contact: new FormGroup([{email: new FormControl(' ', [Validators.required]),mobile: new FormControl(' ', [Validators.required]);
}])
])

2.目前创建表单字段每次都需要new FormGroup,我们可以优化一下使用FormBuilder。如下:

constructor(private fb:FormBuilder)
this.userForm = this.fb.group({name:[' ', [Validators.required]],this.fb.group({email: [' ', [Validators.required]],mobile: [' ', [Validators.required]]})
])

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

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

相关文章

Token2049主办方遭遇假门票风波,韩国罗马基金会Charles Lee损失50万美元

加密货币——遍地黄金&#xff1f;还是遍地陷阱&#xff1f; 尽管伊朗空袭以色列导致中东局势愈发紧张&#xff0c;但加密社区对当地市场的热情丝毫没有受到影响&#xff0c;不出意外的话&#xff0c;Token 2049这场全球最受瞩目的加密货币盛会将于4月18至19日在迪拜如期举行&…

Buck变换电路

Buck变换电路 Buck变换电路是最基本的DC/DC拓扑电路&#xff0c;属于非隔离型直流变换器&#xff0c;其输出电压小于输入电压。Buck变换电路具有效率高、输出稳定、控制简单和成本低的优点&#xff0c;广泛应用于稳压电源、光伏发电、LED驱动和能量回收系统。 电路原理 Buck变…

PyCharm 2024.1 发布:全面升级,助力高效编程!

PyCharm 2024.1 发布&#xff1a;全面升级&#xff0c;助力高效编程&#xff01; 文章目录 PyCharm 2024.1 发布&#xff1a;全面升级&#xff0c;助力高效编程&#xff01;摘要引言 Hugging Face&#xff1a;模型和数据集的快速文档预览针对 JavaScript 和 TypeScript 的全行代…

力扣101. 对称二叉树(java)

思路&#xff1a; 一、验证 左右子树是否可翻转对称的&#xff1f; 二、分析左右子树情况&#xff1a; 1&#xff09;左右都也空 对称 2&#xff09;左右有一个为空 不对称 3&#xff09;左右都不为空&#xff0c;但数字不同 不对称 4&#xff09;左右都不为空&#xff0c;且数…

C++从入门到精通——类和对象(下篇)

1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值。 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;} private:int _year;int _mont…

实验一: 分析ARP解析过程

1.实验环境 主机A和主机B连接到交换机&#xff0c;并与一台路由器互连 2.需求描述 主机A和主机B连接到交换机&#xff0c;并与一台路由器互连主机A和主机B设置为同一网段&#xff0c;网关设置为路由接口地址查看ARP相关信息&#xff0c;熟悉在PC和Cisco设备上的常用命令 3.推…

[leetcode] 快乐数 E

:::details 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果这个过程 结果为 1…

LeetCode 113—— 路径总和 II

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 看到树的问题一般我们先考虑一下是否能用递归来做。 假设 root 节点的值为 value&#xff0c;如果根节点的左子树有一个路径总和等于 targetSum - value&#xff0c;那么只需要将根节点的值插入到这个路径列表中…

全球首个AI女团Sorai.ai出道:定档4月19日北京电影节出道首秀

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

.net 6.0如何直接读取appsetting.json配置文件

现在有一个appsetting.json配置文件&#xff0c;里面有个setting下的url地址&#xff0c;需要读取&#xff0c;如下&#xff1a; {"Logging": {"LogLevel": {"Default": "Information","Microsoft": "Warning",&…

【C++】开始使用stack 与 queue

送给大家一句话&#xff1a; 忍受现实给予我们的苦难和幸福&#xff0c;无聊和平庸。 – 余华 《活着》 开始使用queue 与 stack 1 前言2 stack与queue2.1 stack 栈2.2 queue 队列2.3 使用手册 3 开始使用Leetcode 155.最小栈牛客 JZ31 栈的弹出压入序列Leetcode 150.逆波兰表达…

go work模块与go mod包管理是的注意事项

如下图所示目录结构 cmd中是服务的包&#xff0c;显然auth,dbtables,pkg都是为cmd服务的。 首先需要需要将auth,dbtables,pkg定义到go.work中&#xff0c;如下&#xff1a; 在这样在各个单独的go mod管理的模块就可以互相调用了。一般情况下这些都是IDE自动进行的&#xff0c;…

面试问答之转账功能测试点详解

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

三.吊打面试官系列-数据库优化-索引优化实战

SQL的执行流程 mysql主要分为Server层和存储引擎层&#xff0c;Server层&#xff1a;主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;所有跨存储引擎的功能都在这一层实现&#xff0c;比如存储过程、触发器、视图&#xff0c;函数等&#xff0c;还有一个通用…

[C++][算法基础]判定二分图(染色法)

给定一个 n 个点 m 条边的无向图&#xff0c;图中可能存在重边和自环。 请你判断这个图是否是二分图。 输入格式 第一行包含两个整数 n 和 m。 接下来 m 行&#xff0c;每行包含两个整数 u 和 v&#xff0c;表示点 u 和点 v 之间存在一条边。 输出格式 如果给定图是二分图…

中国科学院大学学位论文LaTeX模版

Word排版太麻烦了&#xff0c;公式也不好敲&#xff0c;推荐用LaTeX模版&#xff0c;全自动 官方模版下载位置&#xff1a;国科大sep系统 → \rightarrow → 培养指导 → \rightarrow → 论文 → \rightarrow → 论文格式检测 → \rightarrow → 撰写模板下载百度云&#…

Android沙盒机制

Android沙盒机制 Android Q文件存储机制修改成了沙盒模式&#xff0c;应用只能访问自己沙盒下的文件和公共媒体文件 存储&#xff08;也就是write&#xff09;私有目录和公共媒体文件都不需要WRITE_EXTERNAL_STORAGE权限读取&#xff08;也就是read&#xff09;私有目录不需要…

福布斯发布2024年人工智能初创企业50强

随着人工智能热潮的持续&#xff0c;一种新的技术经济正在帮助企业开发和部署人工智能驱动的应用程序。在《福布斯》第六届年度“人工智能50强”榜单上&#xff0c;这类新锐企业正大行其道。该榜单遴选了AI领域最有前途的初创公司&#xff0c;由《福布斯》在领先行业专家的帮助…

推荐两个植物miRNA数据库(miRbase和PNRD)

前记 植物miRNA数据库是储存和整理植物微小RNA&#xff08;miRNA&#xff09;相关信息的数据库。miRNA是一类长度为21-24个核苷酸的非编码小分子RNA&#xff0c;能够通过与靶基因的mRNA结合&#xff0c;调控基因表达。植物miRNA数据库通常包含以下内容&#xff1a; miRNA序列信…

蓝桥杯刷题-数星星

1265. 数星星 - AcWing题库 /* 题目中的y是递增&#xff0c;不影响 */ /* 直接看作一维数组的更新维护 */ /* 将数据二进制化&#xff0c;拿最低位的1 */ /* 转化为线段树的解法才是核心 */ /* 思想是前缀和 */ #include <bits/stdc.h>using namespace std;const int N …