Ionic Form Validation

ionic-v1
1

I am trying to do client side form validation. I was able to do it using index. html but I would like to implement it on my project. The end result is that the “error” message always shows up and it does not check whether the input is being written or not. Any thoughts?

 <ion-header>
  <ion-navbar>
    <ion-title> Expense App </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="Login">
    Login Page
  </div>
  <div id="loginContainer">

    <form name="myForm" novalidate>
      <ion-label >Username</ion-label>
      <ion-input type="email" name="username" ng-model="username" value=""></ion-input>
      <ion-label fixed>Password</ion-label>
      <ion-input type="password"></ion-input>

  </form>
  <div class="padding">
    <p ng-show="myForm.username.$error.required">* Username is required </p>
  </div>


<button id="loginButton" ion-button full ng-disabled="myForm.$invalid" (click)="Login()">Login</button>
</div>


</ion-content>Preformatted text
2

Hi, @nighthawk2730
check your code I think you have not included all the fields as “required”

<ion-header>
  <ion-navbar>
    <ion-title> Expense App </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="Login">
    Login Page
  </div>
  <div id="loginContainer">

    <form name="myForm" novalidate>
      <ion-label >Username</ion-label>
      <ion-input type="email" name="username" ng-model="username" value="" required></ion-input>
      <ion-label fixed>Password</ion-label>
      <ion-input type="password" value ="" required></ion-input>

  </form>
  <div class="padding">
    <p ng-show="myForm.username.$error.required && myForm.username.$invalid && myForm.username..$touched">* Username is required </p>
  </div>


<button id="loginButton" ion-button full ng-disabled="myForm.$invalid" (click)="Login()">Login</button>
</div>


</ion-content>

or you can also use below mentioned code, this is the only demo

  <ng-messages class="form-errors"
                       for="login.loginForm.password.$error"
                       ng-if="login.loginForm.password.$touched &&  login.loginForm.password.$invalid || login.loginForm.password.$invalid && login.loginForm.$submitted">
              <div class="form-error" ng-message="required">Password is required.</div>
               <div class="form-error" ng-message="password">This is no valid password.</div> 
  </ng-messages>

          <label class="item item-input input-field" ng-class="{ 'has-error':  login.loginForm.password.$touched &&  login.loginForm.password.$invalid ||  login.loginForm.password.$invalid && login.loginForm.$submitted}">
            <i class="icon ion-locked placeholder-icon"></i>
            <input type="password" placeholder="Password" ng-model="login.loginData.password" required
                 spellcheck="false" name="password">
          </label>

Hope this will solve your issue.

Feel free to mark it as a solution and you can always like the answer by clicking heart icon.