angular2 表单拆成多个组件及提交验证问题

 

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

<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进行数据的双向绑定。

举个简单的例子（核心代码）：

一、form表单-html代码

  <dl>
   <dt> 商品定时下架：</dt>
   <dd>
    <tl-goods-sold-out-timing formControlName="auto_off_date"></tl-goods-sold-out-timing>
    <p class="color-grey">系统会在该时间自动执行下架</p>
    <p class="warn-mark warn-date" *ngIf="mesg('auto_off_date')">{{mesg('auto_off_date')}}</p>
   </dd>
  </dl>
　<button class="btn btn-blue" (click)="submit()">保存</button>

二、tl-goods-sold-out-timing子组件 - html代码

  <div class="clearfix"> 
   <tl-check-box [labelname]="'设定'" [(ngmodel)]="isChecking" (onselectedfn)="selectedFn($event)"></tl-check-box> 
   <div class="position-relative"> 
    <tl-calendar [calendarobj]="calendarObj" [(ngModel)]="startDate" (ngModelChange)="selectDate($event)"></tl-calendar> 
   </div> 
  </div>

看到这里一定很奇怪，为什么同时写了ngModel和ngModelChange，ngModelChange在ts文件里会用到，这个日历组件的值改变后会需要我们调用一个change事件的，往下看。

三、tl-goods-sold-out-timing子组件 - ts代码

import { Component, OnInit, Output, Input, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CalendarObj } from '../../../../../shared'
@Component({
  selector: 'tl-goods-sold-out-timing',
  templateUrl: './goods-sold-out-timing.component.html',
  styleUrls: ['./goods-sold-out-timing.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => GoodsSoldOutTimingComponent),
      multi: true
    }
  ]
})
export class GoodsSoldOutTimingComponent implements OnInit {
  public calendarObj: CalendarObj;
  public isChecking: boolean;
  public startDate: Date;
  private change = (value) => { };      // 划重点
  constructor() {
    this.calendarInit();
  }
  ngOnInit() { }
  get auto_off_date() {      // 父组件的formControlName接收这块return的数据 get的auto_off_date名称和下面this.change(this.auto_off_date);括号中的值名称一样
    console.log(this.startDate);
    if (!this.isChecking) {
      return {
        date: '',
        set: this.isChecking
      }
    }
    return  {
      date: this.startDate ? this.formatDate(this.startDate) : '',
      set: this.isChecking
    }
  }
  registerOnChange(fn) {     
    this.change = fn;
  }
  registerOnTouched(fn) { }
  writeValue(value) {     //  初始时如果父组件有值传入，就从这里写入组件。
    console.log(value);
    if (!value) {
      this.isChecking = false;
    } else {
      this.startDate = new Date(value.substr(0, 10));  // startDate为日历组件数据de双向绑定
      this.isChecking = true;
      console.log(this.startDate);
    }
  }
  // check-box事件
  selectedFn(event) {
    this.change(this.auto_off_date);
  }
  // 日期改变
  selectDate(date) {      // 数据一但改变，就调用一次change事件，如果上面html文件中没有写ngModelChange，这里日期改变就无法传值给父组件
    console.log(date);
    this.startDate = date;
    this.change(this.auto_off_date);    
  }
  // 日期格式转化
  formatDate = function (date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d;
  };
// 日历组件初始化
  calendarInit() {
    this.calendarObj = new CalendarObj();
    this.calendarObj.placeholder = '开始日期';
    this.calendarObj.readonly = true;
    this.calendarObj.yearNavigator = true;
    this.calendarObj.monthNavigator = true;
    this.calendarObj.showOtherMonths = true;
    this.calendarObj.style = { 'width': '93px' };
    this.calendarObj.inputStyle = { 'width': '93px', 'background-position': '87px 1px', 'border': '1px solid #c7c7c7' };
  }
}

四、form表单-ts代码

formControlName="auto_off_date"接收到数据后，我们需要验证一下数据。
  submit(){
　  console.log(this.goodsFormInfo.value);   //  打印表单接收到的数据
　  if(this.goodsFormInfo.valid){
　  // 如果通过验证就提交
　  }
  }
  // 表单验证 
  formInfoInit() {
    this.goodsFormInfo= this.fb.group({ 
      'auto_off_date': ['', [this.validDate()]], 
    })
  }
  mesg(field: string) {
    return this.formUtil.mesg(field);
  }
 // 错误提示
  private validMessages = { 
    'auto_off_date': { 'dateError': '请选择定时下架时间' }, 
  };
  // 验证 - 定时下架
  reqDate() {
    return ((control) => {
      console.log(control);
      if (control.value && control.value.set) {
        if (control.value.date == '') {
          return { dateError: false };
        } }
    });
  }

 

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