CODEWITHSUNDEEP
htmlangularionic-framework
Aravin
Aravin

Reputation: 7067

Ionic Framework using Angular 8 - Basic HTML form's required, min, max validation not working

This is my code

emp.page.html

<form [formGroup]="emiForm" (ngSubmit)="calculateEmi()">
        <!-- Loan Amount -->
        <ion-item>
          <ion-label position="floating">Loan Amount* </ion-label>
          <ion-input type="number" inputmode="numeric" clearInput="true" required min="1" max="999999999" formControlName="loanAmount"></ion-input>
        </ion-item>

        <!-- Rate of Interest -->
        <ion-item>
          <ion-label position="floating">Interest Rate* </ion-label>
          <ion-input type="number" inputmode="numeric" clearInput="true" required="true" min="1" max="100" formControlName="interest"></ion-input>
        </ion-item>

        <!-- No. of Year -->
        <ion-item>
          <ion-label position="floating">Loan Tenure* in Years </ion-label>
          <ion-input type="number" inputmode="numeric" clearInput="true" required="true" min="1" max="50" formControlName="tenure"></ion-input>
        </ion-item>

        <!-- Submit Button -->
        <ion-button type="submit" color="primary" expand="full">Calculate</ion-button>
      </form>

enter image description here

Why I submit a form, the basic required, min and max validations are not happening. It is triggering the calculateEmi() directly.

I tried calling the method from on button submit, not working.

Even If I removed ngSubmit, validations are not working.

Is there anything I am missing?

emi.page.ts

...
...
this.emiForm = this.formBuilder.group({
      loanAmount: ['', Validators.required, Validators.min(1), Validators.max(999999999)],
      interest: ['', Validators.required, Validators.min(1), Validators.max(100)],
      tenure: ['', Validators.required, Validators.min(1), Validators.max(100)],
    });
...
...

Upvotes: 0

Views: 171

Answers (1)

C.OG
C.OG

Reputation: 6529

It's up to you to disable the submit button if the form isn't valid.

You could disable the submit button if the form is invalid, by using the invalid property on the FormGroup.

The ion-button has a disabled input property

<ion-button [disabled]="emiForm.invalid" type="submit" color="primary" expand="full">
  Calculate
</ion-button>

The FormGroup has a few properties you can use.

EDIT

Check you console for errors, as its recommended to have validation in one place (not in your template and component).

Also, multiple validators need to be provided in an array:

this.emiForm = this.formBuilder.group({
    loanAmount: ['', [Validators.required, Validators.min(1), Validators.max(999999999)]],
    interest: ['', [Validators.required, Validators.min(1), Validators.max(100)]],
    tenure: ['', [Validators.required, Validators.min(1), Validators.max(100)]],
});

You also may want to consider adding in your own validation messages in the template rather than relying on the native browser errors.

Upvotes: 1

Related Questions