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

總結

以上是生活随笔為你收集整理的ionic2.0关于表单的验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。