Question

输入字段电子邮件或手机号码，如果客户输入电子邮件，则需要显示电子邮件图标，手机不显示国家/地区代码
表单验证手机号码验证显示范围+91，电子邮件ID验证显示图标，但这不起作用..

    <ion-item [class.error]="!mobilenumber.valid && mobilenumber.touched" class="tog_input animated fadeInLeft delay">
             <span item-left *ngIf="mobIcon == true" class="countryCode">+91</span>
               <ion-icon name="ios-person"  *ngIf="emailIcon == true" item-left color="light" class="PreLoginIcon" ></ion-icon>
             <ion-label id="output" class="labels"  stacked floating> enter email/ mobile no</ion-label>
              <ion-input type="text"  [(ngModel)]=" LoginObj.mobilenumber"  maxlength="45" formControlName="mobilenumber" ></ion-input>
            </ion-item>

    constructor() {
    this.registerForm = formBuilder.group({
      'mobilenumber': ['', Validators.compose([Validators.required, Validators.minLength(5), this.MailorNumber])],
      'Password': ['', Validators.compose([Validators.required, Validators.minLength(2)])]
    });
    this.mobilenumber = this.registerForm.controls['mobilenumber'];
    this.Password = this.registerForm.controls['Password'];

  }
    MailorNumber(control: FormControl): { [s: string]: boolean } {
        var email = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
        var mob = /(^([1-9]{1})([0-9]{9})$)/;
          if ((control.value != '') ) {
              return { MailorNumber: true };
            }
            else if (!(control.value.match(mob))){
              this.mobIcon= true;
              return { MailorNumber: true };

            }
           else if( !(control.value.match(email))){
            this.emailIcon= true;
             return { MailorNumber: true };

            }}

Answer 1

在if语句中检查你的逻辑：

if ((control.value != '') ) { // <-- returns true if control has value
  return { MailorNumber: true };
}
else if (!(control.value.match(mob))){ // <-- if the control has value how to evaluate this?
  this.mobIcon= true;
  return { MailorNumber: true };
}
else if( !(control.value.match(email))){ // <-- and this?
  this.emailIcon= true;
  return { MailorNumber: true };
}

当然应该读到这样的内容：

if (!control.value) {
  return { MailorNumber: true };
} else if (control.value.match(email)) {
  this.emailIcon = true;
  return { MailorNumber: true };
} else if (control.value.match(mob)) {
  this.mobIcon = true;
  return { MailorNumber: true };
}

如何更改图标取决于手机号码，电子邮件ID

1 个答案: