Проверка ионной формы Макс. Длина не работает

Question

Я новичок в приложениях Ionic и пытаюсь показать подтверждение формы, используя приведенный ниже код, и все мои сценарии работают нормально, но номер мобильного телефона должен быть 10 символов , и для этого я следовал приведенному ниже коду, но при вводениже 10 символов сообщение об ошибке не показывает, где я сделал mi-стек может помочь, пожалуйста,

home.ts:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  user: FormGroup;

  constructor(public navCtrl: NavController) {

  }

  ngOnInit() {

    this.user = new FormGroup({

      mobile: new FormControl('', [Validators.required, this.number_check(), Validators.maxLength(10)]),
      url: new FormControl('', [Validators.required, this.URL_check()])
    });

  }

  number_check(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      var re = new RegExp("^(\\d+)$");
      let input = control.value;
      let isValid = re.test(input);
      if (!isValid)
        return { 'number_check': { isValid } }
      else
        return null;
    };
  }

  URL_check(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      var re = new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
      let input = control.value;
      let isValid = re.test(input);
      if (!isValid)
        return { 'url_check': { isValid } }
      else
        return null;
    };
  }

}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>


  <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">

    <ion-item>
      <ion-label>Mobile No</ion-label>
      <ion-input type="text" value="" formControlName="mobile"></ion-input>
    </ion-item>

    <ion-item no-lines *ngIf="( user.get('mobile').hasError('number_check') 
    || user.get('mobile').hasError('maxlength') || user.get('mobile').hasError('required') ) && user.get('mobile').touched">
      <div class="error" *ngIf="user.get('mobile').hasError('required') && user.get('mobile').touched">
        Mobile No is required
      </div>
      <div class="error" *ngIf="user.get('mobile').hasError('number_check') && user.get('mobile').touched">
        Please enter only number(s).
      </div>
      <div class="error" *ngIf="user.get('mobile').hasError('maxlength') && user.get('mobile').touched">
        Mobile No length must be 10!.
      </div>
    </ion-item>


    <ion-item>
      <ion-label>URL</ion-label>
      <ion-input type="text" value="" formControlName="url"></ion-input>
    </ion-item>

    <ion-item no-lines *ngIf="( user.get('url').hasError('url_check') || user.get('url').hasError('required') ) && user.get('url').touched">

      <div class="error" *ngIf="user.get('url').hasError('required') && user.get('url').touched">
        The URL is required
      </div>
      <div class="error" *ngIf="user.get('url').hasError('url_check') && user.get('url').touched">
        Please enter valid URL.
      </div>
    </ion-item>

    <button ion-button [disabled]="user.invalid">Sign up</button>
  </form>

</ion-content>


<style type="text/css">
  .error {
    color: red;
  }
</style>

Answer 1

Вы делаете слишком много проверок.

Попробуйте использовать это вместо этого.

<ion-item no-lines *ngIf="user.get('mobile').touched">
  <div class="error" *ngIf="user.get('mobile').hasError('required')">
    Mobile No is required
  </div>
  <div class="error" *ngIf="user.get('mobile').hasError('number_check')">
    Please enter only number(s).
  </div>
  <div class="error" *ngIf="user.get('mobile').hasError('maxlength')">
    Mobile No length must be 10!.
  </div>
</ion-item>

В противном случае я не вижу никаких проблем в вашем коде, рассмотрите возможность отображения состояния формы с помощью

{{ user.errors }}

, чтобы проверить, правильно ли сработала ваша ошибка.