Question

我是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>

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 }}

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

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

home.ts：

home.html的：

1 个答案: