簡(jiǎn)介：我用的ionic開發(fā)，表單用的響應(yīng)式開發(fā)，包括動(dòng)態(tài)表單、字段驗(yàn)證等。

服務(wù)引入

我用的版本是ionic4,這里的引入跟 app.module.ts 沒有半毛錢關(guān)系，引入的是對(duì)應(yīng)page頁面的 module.ts

import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule
  ],
  declarations: [ReceiptgoodsPage]
})

表單定義+響應(yīng)式表單

import { FormControl, FormGroup, Validators, FormBuilder, FormArray } from "@angular/forms";
import { telphone, idcard, carnumber, integer, positivefloat, numbercompare } from '../services/regrepress';

constructor(
    private fb: FormBuilder,

){}
  //表單
  groupForm = this.fb.group({
    ID: [''],//發(fā)貨單號(hào)
    BH: ['', [Validators.required]],//發(fā)貨單號(hào)
    //司機(jī)信息
    CPH: ['', [Validators.required, carnumber]],//車牌號(hào)
    SFPZ_SJXM: ['', [Validators.required, Validators.maxLength(10)]],//司機(jī)姓名
    SJSFZ: ['', [Validators.required, idcard]],//司機(jī)身份證
    SJSJH: ['', [Validators.required, telphone]],//司機(jī)電話
    //收料人信息
    SLR: [''],//收料人
    SLRDH: [''],//收料人電話
    SLDZ: [''],//收料地址
    Arr: this.fb.array([]), // 收料明細(xì)
  });

注意看這里的 Arr，因?yàn)槭菑暮笈_(tái)獲取的數(shù)據(jù)，所以在獲取的數(shù)據(jù)的那里動(dòng)態(tài)創(chuàng)建

    const arr = this.groupForm.get('Arr') as FormArray;
    result.forEach(item => {
      arr.push(
        this.fb.group({
          WZID: [item.SFPZMX_WZID],
          // SFPZ_BH: [item.SFPZMX_WZBH],
          WZBH: [item.SFPZMX_WZBH],
          WZMC: [item.SFPZMX_WZMC],
          GGXH: [item.SFPZMX_GGXH],
          JLMC: [item.SFPZMX_JLMC],
          YFSL: [item.SFPZMX_YFSL],
          SYSL: [item.SFPZMX_SYSL],
          SFSL: [item.SFPZMX_SFSL ? item.SFPZMX_SFSL : '', [Validators.required, integer, numbercompare]],
          DJ: [item.SFPZMX_DJ],

        })
      )
    });

這樣 就有動(dòng)態(tài)的字段

前臺(tái)以及 驗(yàn)證

      <ion-item class="titletop" lines="none">
        <ion-label class="mustwrite">司機(jī)手機(jī)號(hào)</ion-label>
        <ion-input placeholder="請(qǐng)輸入" formControlName="SJSJH"></ion-input>
      </ion-item>

      <div *ngIf="groupForm.get('SJSJH').invalid && (groupForm.get('SJSJH').dirty || groupForm.get('SJSJH').touched)"
        class="alert alert-danger">
        <div *ngIf="groupForm.get('SJSJH').errors.required">司機(jī)手機(jī)號(hào)不能為空</div>
        <div *ngIf="groupForm.get('SJSJH').errors.telphone">請(qǐng)輸入正確的手機(jī)號(hào)</div>
      </div>

     <div formArrayName="Arr">
        <div *ngFor="let item of groupForm.controls['Arr'].controls;
         let i = index;">
          <div [formGroupName]="i">

            <ion-item-divider>
              <ion-label>
                訂貨明細(xì){{i+1}}
              </ion-label>
            </ion-item-divider>
            <!-- 物資編號(hào) -->
            <ion-item class="titletop" lines="none">
              <ion-label>物資編號(hào)</ion-label>
              <ion-input formControlName="WZBH" readonly></ion-input>
            </ion-item>
            <!-- 物資名稱 -->
            <ion-item class="titletop" lines="none">
              <ion-label>物資名稱</ion-label>
              <ion-input formControlName="WZMC" readonly></ion-input>
            </ion-item>
            <!-- 規(guī)格型號(hào) -->
            <ion-item class="titletop" lines="none">
              <ion-label>規(guī)格型號(hào)</ion-label>
              <ion-input formControlName="GGXH" readonly></ion-input>
            </ion-item>
            <!-- 單位 -->
            <ion-item class="titletop" lines="none">
              <ion-label>計(jì)量單位</ion-label>
              <ion-input formControlName="JLMC" readonly></ion-input>
            </ion-item>

            <ion-item class="titletop" lines="none">
              <ion-label>單價(jià)</ion-label>
              <ion-input formControlName="DJ" readonly></ion-input>
            </ion-item>

            <ion-item class="titletop" lines="none">
              <ion-label>預(yù)發(fā)數(shù)量</ion-label>
              <ion-input formControlName="YFSL" readonly></ion-input>
            </ion-item>
            <ion-item class="titletop" lines="none">
              <ion-label>剩余數(shù)量</ion-label>
              <ion-input formControlName="SYSL" readonly></ion-input>
            </ion-item>

            <ion-item class="titletop" lines="none">
              <ion-label [ngClass]="{'mustwrite': type=='noSend'}">實(shí)發(fā)數(shù)量</ion-label>
              <ion-input formControlName="SFSL" [readonly]="type=='hasSend'"></ion-input>
            </ion-item>

            <div
              *ngIf="groupForm.get('Arr').controls[i].invalid && (groupForm.get('Arr').controls[i].get('SFSL').dirty || groupForm.get('Arr').controls[i].get('SFSL').touched)"
              class="alert alert-danger">
              <div *ngIf="groupForm.get('Arr').controls[i].get('SFSL').errors.required">實(shí)發(fā)數(shù)量不能為空</div>
              <div *ngIf="groupForm.get('Arr').controls[i].get('SFSL').errors.integer">請(qǐng)輸入數(shù)字</div>
              <div *ngIf="groupForm.get('Arr').controls[i].get('SFSL').errors.crosssysl">實(shí)發(fā)數(shù)量不能超過剩余數(shù)量</div>
              <div *ngIf="groupForm.get('Arr').controls[i].get('SFSL').errors.corssyfsl">實(shí)發(fā)數(shù)量不能超過預(yù)發(fā)數(shù)量</div>
            </div>

          </div>
        </div>
      </div>

驗(yàn)證的方法

import { AbstractControl, FormControl } from "@angular/forms";

//control是我們要驗(yàn)證的表單控件, 
export function beginWith(control: AbstractControl) {
    const result = /^13/.test(control.value);
    return result ? null : { 'beginWith': { value: control.value } };
}
//手機(jī)號(hào)
export function telphone(control: AbstractControl) {
    // debugger;
    const result = /0?(13|14|15|18|17)[0-9]{9}/.test(control.value);
    return result ? null : { 'telphone': { value: control.value } };
}
//身份證
export function idcard(control: AbstractControl) {
    // debugger;
    const result = /\d{17}[\d|x]|\d{15}}/.test(control.value);
    return result ? null : { 'idcard': { value: control.value } };
}
//正浮點(diǎn)數(shù)
export function positivefloat(control: AbstractControl) {
    // debugger;
    const result = /[1-9]\d*/.test(control.value);
    return result ? null : { 'integer': { value: control.value } };
}
//正整數(shù)
export function integer(control: AbstractControl) {
    // debugger;
    const result = /[1-9]\d*/.test(control.value);
    return result ? null : { 'integer': { value: control.value } };
}

//車牌號(hào)
export function carnumber(control: AbstractControl) {
    // debugger;
    const result = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學(xué)警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警軍港澳]{1}$)/.test(control.value);
    return result ? null : { 'carnumber': { value: control.value } };
}

//實(shí)發(fā) 與剩余數(shù)量 預(yù)發(fā)數(shù)量 比較
export function numbercompare(control: AbstractControl) {
    if (!control.parent) {
        return true;
    }
    var result = true;
    // debugger;
    //預(yù)發(fā)數(shù)量 
    var YFSL = parseInt(control.parent.value.YFSL);
    //剩余數(shù)量
    var SYSL = parseInt(control.parent.value.SYSL);
    //實(shí)發(fā)數(shù)量
    var SFSL = parseInt(control.value);

    if (SYSL) {
        SFSL > SYSL ? result = false : result = true;
        return result ? null : { 'crosssysl': { value: control.value } };
    } else {
        SFSL > YFSL ? result = false : result = true;
        return result ? null : { 'corssyfsl': { value: control.value } };
    }

}