CODEWITHSUNDEEP
javascriptangularjsformsvalidation
sweepy_
sweepy_

Reputation: 1331

Form validation using $touched and $error

I'm trying to implement client-side validation using built-in validation mechanisms provided by AngularJS.

I've a simple input of type email which must display an error if the email is invalid once the form get submitted using $submitted or once the control has lost focus using $touched.

<form name="form" novalidate>
    <div class="form-group">
        <label for="input-emailaddress">Adresse email</label>
        <input type="email" class="form-control" name="input-emailaddress" placeholder="Entrez votre email" ng-model="user.email" required="required">
        <div ng-show="form.$submitted || form.input-emailaddress.$touched">
            <div ng-show="form.input-emailaddress.$error.email">Please insert a valid email address.</div>
        </div>
    </div>
</form>

But there's no error triggered when I type an invalid email address. $submitted works fine cause if I remove every other conditions, the message appears once triggered, but when I need to access a specific field (form.input-emailaddress), validation does not work.

Does anyone could help me figure out why this doesn't work?

Upvotes: 2

Views: 1305

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

As you are accessing JSON object using . at that time you variable shouldn't contain any character like - or shouldn't be started with numeric variable. You should do access form.input-emailaddress like form["input-emailaddress"] because it contains hyphen in name will not work

Update

As per @SunilD suggestion we could have change name to should not follow in such crieteria you could use cammel case instead of doing this

Upvotes: 4

Related Questions