javascript - Angular 7 min length validation error not showing reactive forms - Stack Overflow

admin管理员组

文章数量:1023064

Form validation min length validation error not showing i am using reactive forms

<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: ['', Validatorspose([
        Validators.required,
        Validators.minLength(10),
        Validators.pattern("[0-9]{0-10}")
      ])],
 );

Form validation min length validation error not showing i am using reactive forms

<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.pose([
        Validators.required,
        Validators.minLength(10),
        Validators.pattern("[0-9]{0-10}")
      ])],
 );

• javascript
• angular
• angular-forms

Share Improve this question Follow edited Mar 13, 2019 at 6:08 sridharan asked Mar 13, 2019 at 6:02 sridharansridharan 2,0651010 gold badges3838 silver badges6262 bronze badges 4

• Can I see your ponent code? What did you write when you initialise your formgroup/formbuilder? – wentjun Commented Mar 13, 2019 at 6:04
• did you pass the Validators.maxLength to formcontrol – Sachila Ranawaka Commented Mar 13, 2019 at 6:04
• @sanchila i need min length and max length 10 – sridharan Commented Mar 13, 2019 at 6:36
• 2 [hidden]="!subMerchant.controls.SubMercMobileNo.hasError('minlength') In your HTML try this. – Arpit Kumar Commented Mar 13, 2019 at 6:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

You have not used minlength="a number" on element

Form validation min length validation error not showing i am using reactive forms

<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: ['', Validatorspose([
        Validators.required,
        Validators.minLength(10),
        Validators.pattern("[0-9]{0-10}")
      ])],
 );

Form validation min length validation error not showing i am using reactive forms

<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.pose([
        Validators.required,
        Validators.minLength(10),
        Validators.pattern("[0-9]{0-10}")
      ])],
 );

• javascript
• angular
• angular-forms

Share Improve this question Follow edited Mar 13, 2019 at 6:08 sridharan asked Mar 13, 2019 at 6:02 sridharansridharan 2,0651010 gold badges3838 silver badges6262 bronze badges 4

• Can I see your ponent code? What did you write when you initialise your formgroup/formbuilder? – wentjun Commented Mar 13, 2019 at 6:04
• did you pass the Validators.maxLength to formcontrol – Sachila Ranawaka Commented Mar 13, 2019 at 6:04
• @sanchila i need min length and max length 10 – sridharan Commented Mar 13, 2019 at 6:36
• 2 [hidden]="!subMerchant.controls.SubMercMobileNo.hasError('minlength') In your HTML try this. – Arpit Kumar Commented Mar 13, 2019 at 6:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

You have not used minlength="a number" on element

本文标签： javascriptAngular 7 min length validation error not showing reactive formsStack Overflow