Question

我的代码如下所示。

请有人向我解释如何提供所有国家/地区的列表并验证电话号码吗？

<div formGroupName="country_phone">
      <ion-item>
        <ion-label  color="primary">Country</ion-label>
        <ion-select formControlName="country" cancelText="Cancel" okText="OK">
          <ion-option *ngFor="let item of countries" [value]="item" >{{item.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-input [textMask]="{mask: validations_form.value.country_phone.country.phone_mask}" placeholder="{{ validations_form.value.country_phone.country.sample_phone }}" type="text" formControlName="phone"></ion-input>
      </ion-item>
      <div class="validation-errors">
        <ng-container *ngFor="let validation of validation_messages.phone">
          <div class="error-message" *ngIf="validations_form.get('country_phone').get('phone').hasError(validation.type) && (validations_form.get('country_phone').get('phone').dirty || validations_form.get('country_phone').get('phone').touched)">
            {{ validation.message }}
      </div>
</ng-container>
        </div>

这是TS文件代码：

'phone': [
      { type: 'required', message: 'Phone is required.' },
      { type: 'validCountryPhone', message: 'Phone incorrect for the country selected' }
    ],

Answer 1

   import { Events} from 'ionic-angular';
    import { FormBuilder, FormGroup, Validators,AbstractControl,FormControl} from '@angular/forms';


   in constructor

     private event : Events,
    private fb: FormBuilder,

   event.subscribe('new', (data) => {
          this.count=this.count+1;
  this.dropdata();

});


   changeLanguage() {
   let alert = this.alertCtrl.create();
alert.setTitle(this.translate.instant('Choose_Language'));

 alert.addInput({
    type: 'radio',
    label: data,
    value: eng,
    checked: true
  });



alert.addButton(this.translate.instant('Info.05'));
alert.addButton({
  text: data,
  handler: data => {
       this.event.publish('new', true);



  }
});

alert.present().then(() => {
  this.testRadioOpen = true;
});
    }

       dropdata(){
      this.MobileNoPageForm = this.fb.group({
      'mobileNo' : ['',
             [Validators.required,Validators.minLength(this.count), 
   Validators.maxLength(this.count),Validators.pattern('[0-9]*')]]
    })

   this.mobileNo = this.MobileNoPageForm.controls['mobileNo'];
   }

Answer 2

  <form [formGroup]="MobileNoPageForm">

  <button ion-button class="button button-assertive ink login-btn" 
              (click)="changeLanguage()">
   langauge
    </button>
       <ion-list>
      <ion-item>
          <ion-input type="tel" maxlength="30" formControlName="mobileNo" 
     [class.error]="!mobileNo.valid && mobileNo.touched" 
        [(ngModel)]="verifyMobileObj.mobileNo"></ion-input>
      </ion-item>
      <div class="error-box" *ngIf="mobileNo.hasError('required') && mobileNo.touched">
        <ion-icon name="md-warning"></ion-icon> mobile number is reqired</div>
          <div class="error-box" *ngIf="mobileNo.hasError('minlength') && 
         mobileNo.touched">
        <ion-icon name="md-warning"></ion-icon> mobile number length{{count}}</div>
        <div class="error-box" *ngIf="mobileNo.hasError('maxLength') && mobileNo.touched">
        <ion-icon name="md-warning"></ion-icon>  mobile number length{{count}}</div>
      <div class="error-box" *ngIf="mobileNo.hasError('pattern') && mobileNo.touched">
         <ion-icon name="md-warning"></ion-icon> valid mobile number</div>

     </ion-list>

    </form>

如何使用离子2中的国家/地区列表验证电话号码？

2 个答案: