anular2 表单包含多个组件并验证提交

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进行数据的双向绑定。以下简单的说明一下步骤及核心代码。

一、

 

 

 

（本文原创，转载请注明出处！！）