ionic2.0关于表单的验证

2019独角兽企业重金招聘Python工程师标准>>>

1、html文件，实现提示语说明和提交事件

<form [ngFormModel]="commissionForm" (ngSubmit)="onSubmit(commissionForm.value)">
<ion-item [class.error]="!offerName.valid && offerName.touched">
                <ion-label class="form-label">标题</ion-label>
                <ion-input item-right [ngFormControl]="offerName" type="text" placeholder="请输入标题"></ion-input>
            </ion-item>
            <div *ngIf="offerName.hasError('required')&& offerName.touched" class="error-box">* 标题不可为空!</div>
            <div *ngIf="offerName.hasError('minlength')&& offerName.touched" class="error-box">* 标题最小长度2个字符!</div>
            <div *ngIf="offerName.hasError('maxlength')&& offerName.touched" class="error-box">* 标题最大长度255个字符!</div>

2、ts文件，实现表单约束

import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup,AbstractControl} from '@angular/common';
@Page({
    templateUrl: 'build/pages/publish/createCommission.html',
    providers: [FormBuilder,CommissionService,ShopService,AppConfig],
    directives: [FORM_DIRECTIVES]
})
 commissionForm:ControlGroup;
    private offerName: AbstractControl;
    constructor(public nav:NavController,private params:NavParams, private fb: FormBuilder,private commissionService:CommissionService,private shopService:ShopService) {
        this.commissionForm = this.fb.group({
            'offerName': ['', Validators.compose([Validators.required, Validators.minLength(2),Validators.maxLength(255)])],
            'residence': new ControlGroup({residenceId: new Control(CustomerSession.getResidenceId())}),
        });
        this.offerName = this.commissionForm.controls['offerName'];
    }

onSubmit(value:string):void {
        this.commissionForm.value.providerType = this.isShop?'MERCHANT':'PERSONAL';
        
        if (this.commissionForm.valid) {
            this.commissionService.addCommission(value).subscribe(
                data => {});
                
                }
}

转载于:https://my.oschina.net/u/241110/blog/714828