时间戳

首页 > 解决方案 > Angular 7 min 长度验证错误未显示反应形式

javascript - Angular 7 min 长度验证错误未显示反应形式

问题描述

表单验证最小长度验证错误未显示我正在使用反应式表单

<div [formGroup]="subMerchant">
    <ion-item class="inputDesign">
            <ion-input placeholder="Enter Sub Merchant Mobile no" formControlName="SubMercMobileNo" type="tel" maxlength="10"></ion-input>
          </ion-item>
          <ion-text class="errorText" color="danger" *ngIf="subMerchant.controls.SubMercMobileNo.errors && submitted == true">
            <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.required">Mobile is required</p>
            <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.minlength">Enter minlength 10</p>
            <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.pattern">Enter valid is Mobile No</p>
          </ion-text>
</div>

  subMerchant: FormGroup;
 this.subMerchant = this.formBuilder.group({
      SubMercMobileNo: ['', Validators.compose([
        Validators.required,
        Validators.minLength(10),
        Validators.pattern("[0-9]{0-10}")
      ])],
 );

标签： javascriptangularangular-forms

解决方案

<div [formGroup]="subMerchant">
<ion-item class="inputDesign">
        <ion-input placeholder="Enter Sub Merchant Mobile no" formControlName="SubMercMobileNo" type="tel" minlength="10"></ion-input>
      </ion-item>
      <ion-text class="errorText" color="danger" *ngIf="subMerchant.controls.SubMercMobileNo.errors && submitted == true">
        <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.required">Mobile is required</p>
        <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.minlength">Enter minlength 10</p>
        <p [hidden]="!subMerchant.controls.SubMercMobileNo.errors.pattern">Enter valid is Mobile No</p>
      </ion-text>

推荐阅读