如何使用Angular FormBuilder
时间:2022-07-23
本文章向大家介绍如何使用Angular FormBuilder,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
看个具体的例子:
(1) 在app.module.ts里,引入ReactiveFormsModule:
import { ReactiveFormsModule } from ‘@angular/forms’;
以及加到@NgModule的imports区域:
(2) 在需要显示form的Component html上,导入FormBuilder:
import { FormBuilder } from ‘@angular/forms’;
在CartComponent里,新建一个checkoutForm,用于存储formBuilder的group方法返回的form模型:
(3) 在订单提交阶段,用户需要手动输入其名称和地址。
定义一个事件处理函数onSubmit,清除Cart里所有的数据:
下一步就是在Cart Component视图里,绘制form以及内部的元素:
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
<div>
<label for="name">
Name
</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<label for="address">
Address
</label>
<input id="address" type="text" formControlName="address">
</div>
<button class="button" type="submit">Purchase</button>
</form>
最后cart view的效果:
点了Purchase按钮后的输出:
- 智能机器人崛起背后的中国力量
- 企业微服务架构转型-实施步骤
- Andrew Ng机器学习课程笔记--week2(多元线性回归&正规公式)
- 科技第六感:黑客控制你的车!不信?其实很简单
- python多版本的pip共存问题解决办法
- C++ 对vector进行排序
- 小程序优化36计
- 神经网络权重初始化问题
- Andrew Ng机器学习课程笔记--week11(图像识别&总结划重点)
- 市民近期到南沙有望体验到无人驾驶技术
- Andrew Ng机器学习课程笔记--week10(优化梯度下降)
- Andrew Ng机器学习课程笔记--week9(下)(推荐系统&协同过滤)
- Andrew Ng机器学习课程笔记--week9(上)(异常检测&推荐系统)
- python程序员开发必备的5大工具,你用过几个?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- c语言函数指针的理解与使用
- Python爬虫基础
- Python算法基础
- pytorch读取一张图像进行分类预测需要注意的问题(opencv、PIL)
- 【LeetCode】旋转数组的最小数字day08
- 【原创】Spring Boot集成Redis的玩法
- 当前页面是否可见
- 【LeetCode】两数之和day09
- 【原创】SpringBoot快速整合Thymeleaf模板引擎
- 【leetCode】打印从1到最大的n位数day10
- 你真的了解Java中的String吗(也太菜了)?
- 【设计模式】变化和不变化的代码进行分离day01
- isObject
- 【leetCode】股票的最大利润day12
- Spring Boot 集成 Druid 监控数据源