CODEWITHSUNDEEP
angularjs
Jacksonkr
Jacksonkr

Reputation: 32227

AngularJS basic form validation

In my form I want to make sure an email is typed in and that a password is typed in. Is this possible with the angularJS tools out of the box? Here's what I have currently:

<ion-view title="Welcome">
    <ion-content>
        <div class="list">
            <form name="signInForm">

              <label class="item item-input item-stacked-label">
                <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]">
              </label>

              <label class="item item-input item-stacked-label">
                <input ng-model="user.password" type="password" placeholder="password">
              </label>

              {{ signInForm["user.email"] }}
                <button data-ng-click="signInClick()" data-ng-disabled="signInForm.$invalid" class="button button-full button-positive">
                Sign In
                </button>

              <div class="button-bar">
                  <a href="#/sign-up" class="button">Sign Up</a>
                  <a href="#/forgot-password" class="button"><em>Forgot Password</em></a>
                </div>

            </form>
        </div>
    </ion-content>
</ion-view>

My biggest issue is that the button becomes clickable even though there is no password typed in. How can I fix this?

Upvotes: 0

Views: 131

Answers (2)

batmaniac7
batmaniac7

Reputation: 422

Use "required" on input fields and the check for form validation. 

                <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]" required>

                <input ng-model="user.password" type="password" placeholder="password" required>

Upvotes: 1

reptilicus
reptilicus

Reputation: 10397

Just put required on the email and password fields

<label class="item item-input item-stacked-label">
  <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]" required>
</label>

<label class="item item-input item-stacked-label">
  <input ng-model="user.password" type="password" placeholder="password" required>
</label>

Upvotes: 1

Related Questions