验证页面上的select元素

时间:2016-08-26 11:24:27

标签: angular typescript ionic2

如何为select标签编写验证? 这是我的select标签代码,但我没有得到select的验证,消息也没有来。

html代码

<form>
 <ion-list [ngFormModel]="registrationForm">
<ion-item>
      <ion-label floating>Preffer Payment<span class="redtxt">*</span></ion-label>
        <ion-select ngControl="pay">
          <ion-option>Neft/Rtgs/Imps</ion-option>
          <ion-option>Debet/Credit</ion-option>
          <ion-option>Net Banking</ion-option>
        </ion-select>
      <div control="pay" class="validation-error">This is required</div>
    </ion-item>
</ion-list>
<form>

ts代码

public registrationForm:any;
constructor(public navCtrl: NavController,public _form: FormBuilder) {
this.registrationForm = this._form.group({
            "pay":["",Validators.required]
        })
    }

1 个答案:

答案 0 :(得分:0)

如果该属性无效,您可以使用controls数组registrationForm来显示消息。

<form>
  <ion-list [ngFormModel]="registrationForm">

    <ion-item>
      <ion-label floating>Preffer Payment<span class="redtxt">*</span></ion-label>
        <ion-select ngControl="pay">
          <ion-option>Neft/Rtgs/Imps</ion-option>
          <ion-option>Debet/Credit</ion-option>
          <ion-option>Net Banking</ion-option>
        </ion-select>     
    </ion-item>

    <!-- Error message -->
    <ion-item *ngIf="!registrationForm.controls.pay.valid">
      <div control="pay" class="validation-error">This is required</div>
    </ion-item>

  </ion-list>
<form>