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. 以打印日志为荣之logging模块详细使用

    啄木鸟社区里的Pythonic八荣八耻有一条: 以打印日志为荣 , 以单步跟踪为耻; 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出,python ...

  2. hdu3720 Arranging Your Team

    Arranging Your Team Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  3. Java并发编程-阻塞队列

    Java concurrent 包中BlockingQueue接口有ArrayBlockingqueue.LinkedBlockingQueue.PriorityBlockingQueue.Synch ...

  4. JavaScript笔记之第六天

    JavaScript 库 JavaScript 库 - jQuery.Prototype.MooTools. jQuery jQuery 是目前最受欢迎的 JavaScript 框架. 它使用 CSS ...

  5. 新的表格展示利器 Bootstrap Table Ⅱ

        上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...

  6. 设置Linux环境变量的方法与区别(Ubuntu)

      设置 Linux 环境变量可以通过 export 实现,也可以通过修改几个文件来实现,有必要弄清楚这两种方法以及这几个文件的区别.   通过文件设置 Linux 环境变量 首先是设置全局环境变量, ...

  7. 团队作业4——第一次项目冲刺 tHiRd DaY

    项目冲刺--Triple Kill 小编又来了,好困呐,上了一天的课还要写博客,为什么写博客的一直是我呢..一点乐子都没有*-* 但是我还是得写啊[我也很无奈啊],那就让我给大家找点乐子吧 天霸动霸. ...

  8. 团队作业8——第二次项目冲刺(Beta阶段)--第四天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 17% 201421123002 翁珊 18% 201421123004 ...

  9. Java学习1——JDK(学前准备)

    一.下载: 可以在http://www.oracle.com/technetwork/java/javase/downloads/index.html下载并安装Java SE(JDK) java大致版 ...

  10. 201521123108 《Java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 答:主要是应用到了list中的add和remove等方法,dan'sh但是这道题主要的考察点在于li ...