angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证。

<form [formGroup]="goodsFormInfo">

  <input type="text" formControlName="book_file" readonly/>
  <!--或者-->
 <dl formGroupName="book_isbn">
<dt><span>*</span>ISBN号:</dt>
<dd>
<input id="book_isbn1" td-focus formControlName="book_isbn1" [patternInput]="'^[0-9]+$'" class="isbn" type="text" maxlength="3" >
<span>-</span>
<input id="book_isbn2" td-focus formControlName="book_isbn2" [patternInput]="'^[0-9]+$'" class="isbn" type="text" maxlength="1" >
<span>-</span>
<input id="book_isbn3" td-focus formControlName="book_isbn3" [patternInput]="'^[0-9]+$'" class="isbn" type="text" maxlength="7" >
<span>-</span>
<input id="book_isbn4" td-focus formControlName="book_isbn4" [patternInput]="'^[0-9]+$'" class="isbn" type="text" maxlength="6" >
<span>-</span>
<input id="book_isbn5" td-focus formControlName="book_isbn5" [patternInput]="'^[0-9]+$'" class="isbn" type="text" maxlength="1" >
<p class="warn-mark" *ngIf="mesg('book_isbn1') || mesg('book_isbn2') || mesg('book_isbn3') || mesg('book_isbn4') || mesg('book_isbn5') || mesg('book_isbn')">
{{ mesg('book_isbn1') || mesg('book_isbn2') || mesg('book_isbn3') || mesg('book_isbn4') || mesg('book_isbn5') || mesg('book_isbn')
}}</p>
</dd>
</dl>
</form>
 
不过最近遇到一个比较复杂的表单提交, 如果全部写在一个组件里,代码可读性太差,所以把表单拆成了多个组件,通过formControlName进行数据的双向绑定。以下简单的说明一下步骤及核心代码。
一、
 
 
 
(本文原创,转载请注明出处!!)

anular2 表单包含多个组件并验证提交的更多相关文章

  1. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  2. 实现一个兼容eleUI form表单的多选组件

    本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...

  3. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

  4. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  5. 表单元素disabled禁用后不能自动提交到服务器

    表单元素disabled禁用后不能自动提交到服务器,项目中需要一个元素只展示不修改,所以把一个input元素设置成了disabled="disabled",但是提交的时候改数据值是 ...

  6. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  7. django中ModelForm save方法 以及快速生成空表单或包含数据的表单 包含错误信息

    django中ModelForm学习系列一~save方法 Model代码 from django.db import models # Create your models here. class P ...

  8. React学习——通过模态框中的表单,学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  9. avue你繁琐的表格、表单、树等组件开发的解脱工具,了解一下?

    简介 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基 ...

随机推荐

  1. linux下FTP服务器搭建教程1

    你买了个主机就像是买了块地皮,搭建FTP就像是盖房子,我在地皮上建房子,然后创建的用户就像是钥匙,我给谁钥匙(权限),谁就可以到我家去玩,去放东西,拿东西. 虽然我们买不起现实的房子,但是我们可以买互 ...

  2. Eclipse知识

    http://www.runoob.com/eclipse/eclipse-create-jar-files.html Eclipse 生成jar包 打开 Jar 文件向导 Jar 文件向导可用于将项 ...

  3. ★电车难题的n个坑爹变种

    哲学家都不会做的电车难题变异 此题会答清华北大 "电车难题(Trolley Problem)"是伦理学领域最为知名的思想实验之一,其内容大致是: 一个疯子把五个无辜的人绑在电车轨道 ...

  4. Beta版本冲刺计划安排

    1.介绍小组新加入的成员,Ta担任的角色 王婧:web界面以及前端和后台的交互 柯怡芳:PM以及文档 陈艺菡:修复bug以及文档 钱惠:web界面以及前端和后台的交互 林凯:测试人员 吴伟君(新成员) ...

  5. Windows环境下JDK的下载与安装

    根据极客学院上的网课做的学习笔记,网课地址:http://www.jikexueyuan.com/course/205.html 1.首先检查一下本机是否有安装java.按win+R,在弹出窗口中输入 ...

  6. Java 第八周总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除 1.1 实验总结 list中可以通过list.get(i)来获取具体第几个的元素的值,再通过compareTo来对比 通过in.has ...

  7. 201521123057 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 答: 面向对象 ...

  8. 201521123004 《Java程序设计》第2周学习总结

    本周学习总结 ① String类的对象是不可变(immutable)的 String对象创建之后不能再进行修改 -->StringBuilder ② 字符串的拼接(使用"+" ...

  9. 201521123002《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  10. 201521123042《Java程序设计》第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.bai ...