离子形式验证最大长度不起作用答案

【问题标题】：Ionic Form validation Max-length not working离子形式验证最大长度不起作用
【发布时间】：2018-05-29 15:08:23
【问题描述】：

我是 Ionic 应用程序的初学者，我正在尝试使用下面的代码显示表单验证，我的所有场景都可以正常工作，但 手机号码必须是 10 个字符，为此我遵循以下代码但是当我输入低于 10 个字符的错误消息未显示我在哪里做 mi-stack 可以帮助我吗

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>

【问题讨论】：

标签： angular ionic-framework

【解决方案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 }}

查看您的错误是否被正确触发。

【讨论】：