# Ionic form validations

**URL:** <https://forum.ionicframework.com/t/ionic-form-validations/106910>\
**Category:** ionic-v3\
**Created:** [September 27, 2017, 12:13pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910 "2017-09-27T12:13:05Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kartheekjonnalagadda](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@kartheekjonnalagadda](https://forum.ionicframework.com/u/kartheekjonnalagadda)\
**Post date:** [September 27, 2017, 12:13pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/1 "2017-09-27T12:13:06Z")

</div>

Hello ,

In my ionic form, I have 2 ion-input fields and one ion-select field. so I want to validate form all fields are required. how to do that?

---

<div class="post-metadata">

**Author:** ![atul2889](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@atul2889](https://forum.ionicframework.com/u/atul2889)\
**Post date:** [September 27, 2017, 12:26pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/2 "2017-09-27T12:26:37Z")

</div>

This is your view.html:

```auto
<ion-content padding>

    <ion-list>
        <form #myForm="ngForm" (ngSubmit)="postData()">
            <ion-item>
                <ion-label floating>Name</ion-label>
                <ion-input type="text" [(ngModel)]="users.name" id="name" name="name" required #name="ngModel"></ion-input>

            </ion-item>
            <span *ngIf="name.errors">
                <span [hidden]="!name.errors.required">
                    <ion-label style="color: red; margin-left: 16px;"> Name is required </ion-label>
                </span>
            </span>

            <ion-item>
                <ion-label floating>Email</ion-label>
                <ion-input type="email" id="email" [(ngModel)]="users.email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required #email="ngModel" ></ion-input>
            </ion-item>
            <span *ngIf="email.errors">
                <span [hidden]="!email.errors.required">
                    <ion-label style="color: red; margin-left: 16px;"> Email is required </ion-label>
                </span>
                <span [hidden]="!email.errors.pattern">
                    <ion-label style="color: red; margin-left: 16px;"> Please enter a valid email </ion-label>
                </span>
            </span>

            <ion-item>
                <ion-label floating>Contact</ion-label>
                <ion-input type="number" id="contact" [(ngModel)]="users.contact" name="contact" required #contact="ngModel"></ion-input>
            </ion-item>
            <span *ngIf="contact.errors">
                <span [hidden]="!contact.errors.required">
                    <ion-label style="color: red; margin-left: 16px;"> Contact is required </ion-label>
                </span>
            </span>

            <ion-item>
                <button [disabled]="!myForm.form.valid" type="submit" ion-button block>Submit</button>
            </ion-item>
        </form>
    </ion-list>
</ion-content>

```

This is your component.ts:

```auto
export class AddCustomerPage {

    private dataArray: any[];
    private users = {
        name: '',
        contact: '',
        email: ''
    };
}

```

Maybe this will help you 🙂

---

<div class="post-metadata">

**Author:** ![kartheekjonnalagadda](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@kartheekjonnalagadda](https://forum.ionicframework.com/u/kartheekjonnalagadda)\
**Post date:** [September 27, 2017, 12:51pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/3 "2017-09-27T12:51:55Z")

</div>

Thanks for the quick replay

I am getting below error

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/8/78601bc177e2c138faff779641ed1c559f8b2ce1.png)

---

<div class="post-metadata">

**Author:** ![atul2889](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@atul2889](https://forum.ionicframework.com/u/atul2889)\
**Post date:** [September 27, 2017, 12:56pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/4 "2017-09-27T12:56:26Z")

</div>

```auto
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

```

add this in your module.ts or component.ts and refer the below link:

> **[Ionic Framework](https://ionicframework.com/docs/developer-resources/forms/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![kartheekjonnalagadda](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@kartheekjonnalagadda](https://forum.ionicframework.com/u/kartheekjonnalagadda)\
**Post date:** [September 27, 2017, 1:02pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/5 "2017-09-27T13:02:42Z")

</div>

Thanks for replay,

I am able to get the required field validation only when I enter text and removed. but I want to show error message on button click. without touching any input field

![image](https://global.discourse-cdn.com/ionicframework/original/3X/4/7/471753093241fff1a1e78e552e8eeebf50346a8c.png)

see the code

```auto

<ion-header>

  <ion-navbar>
    <ion-title>Portal dayrec and exp</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <section>
    <ion-item-group>
      <ion-item-divider color="light">
        <h3>CS17SEP ORI 5686 <b>NW9 5EU</b></h3>
      </ion-item-divider>
      <form [formGroup]="form" (ngSubmit)="SaveChanges(form.value)">
        <ion-list no-line>
          <ion-item>
            <ion-label color="primary" floating>Ints</ion-label>
            <ion-input formControlName="Ints" type="number"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label color="primary" floating>Edit Ints</ion-label>
            <ion-input formControlName="EditInts" type="number"> </ion-input>
          </ion-item>
          <ion-item>
            <ion-label color="primary" floating>Hrs</ion-label>
            <ion-select formControlName="Hrs">
              <ion-option *ngFor="let hour of hours" [value]="hour">{{hour}}</ion-option>
            </ion-select>
          </ion-item>
          <ion-item>
            <ion-label color="primary" floating>Comment</ion-label>
            <ion-textarea></ion-textarea>
          </ion-item>
        </ion-list>

        <div>
          <button ion-button color="dark" [disabled]="!form.valid" block><span class="fontColor" >Save</span></button>
        </div>
      </form>
    </ion-item-group>
    <div padding>
      <button ion-button color="dark" block><span class="fontColor" (click)="NavigateToExpenses()" >View Expenses</span></button>
    </div>
  </section>
</ion-content>

```

Ts code

```auto
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@IonicPage()
@Component({
selector: 'page-portaldayrecandexp',
templateUrl: 'portaldayrecandexp.html',
})
export class PortaldayrecandexpPage {
hours: any[] = [];
_i: number;
submitAttempt: boolean = false;
public form: FormGroup;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _FB: FormBuilder) {
this.form = _FB.group({
'Ints': ['', Validators.required],
'EditInts': ['', Validators.required],
'Hrs': ['0', Validators.required]
});
}

ionViewDidLoad() {
console.log('ionViewDidLoad PortaldayrecandexpPage');
this.getHours();
}
NavigateToExpenses() {
this.navCtrl.push("ExpensesPage");
}
getHours() {
for (this._i = 0; this._i <= 48; this._i++) {
this.hours.push(this._i / 4);
}
}
SaveChanges(form) {
console.log(form);
}

}

```

---

<div class="post-metadata">

**Author:** ![dayanajabif](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dayanajabif/32/126298_2.png) [@dayanajabif](https://forum.ionicframework.com/u/dayanajabif)\
**Post date:** [September 27, 2017, 6:52pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/6 "2017-09-27T18:52:49Z")

</div>

You can also check this repo which is an Ionic 3 example app to learn how to handle Forms and Validations: [https://github.com/ionicthemes/ionic2-form-handling-and-validations](https://github.com/ionicthemes/ionic2-form-handling-and-validations)  
Hope it helps 😉

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 27, 2017, 7:33pm UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/7 "2017-09-27T19:33:14Z")

</div>

> [@atul2889](#):
>
> private

All properties accessed by templates must be public.

---

<div class="post-metadata">

**Author:** ![atul2889](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@atul2889](https://forum.ionicframework.com/u/atul2889)\
**Post date:** [September 28, 2017, 5:45am UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/8 "2017-09-28T05:45:26Z")

</div>

Thank you for your suggestion. I will keep this in mind for my next functionality. But this code is working fine for me now.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 28, 2017, 6:22am UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/9 "2017-09-28T06:22:06Z")

</div>

> [@atul2889](#):
>
> this code is working fine for me now.

It should break in production. If it doesn’t, it’s only because of a side-effect of how app-scripts compiles things that you should not rely on.

---

<div class="post-metadata">

**Author:** ![Tanzeel064](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@Tanzeel064](https://forum.ionicframework.com/u/Tanzeel064)\
**Post date:** [March 19, 2018, 11:22am UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/10 "2018-03-19T11:22:31Z")

</div>

Atula this one is really good, really helped out me.

---

<div class="post-metadata">

**Author:** ![SurajSaama](https://avatars.discourse-cdn.com/v4/letter/s/ea666f/32.png) [@SurajSaama](https://forum.ionicframework.com/u/SurajSaama)\
**Post date:** [April 16, 2018, 10:31am UTC](https://forum.ionicframework.com/t/ionic-form-validations/106910/11 "2018-04-16T10:31:06Z")

</div>

Thanks Buddy…It wll help me