validation issue using angular js (red border display on firefox)?

Question

I make a simple form from object ..now i validate that form .I am facing few issues while validation.please check this on firefox..

http://plnkr.co/edit/CFUR2mgVv4hzXPF7AR9y?p=preview

• My field become red (red border on input field)when i write required true and display message "please enter the valid email" after run app.it should become red when user move focus one field to another.and i need to display two message "please enter the email" with "please enter the valid email" how I can do that ?

I study lot of tutorial but I apply this thing $dirty , $pristine but nothing works for me.. I study from there validation .. http://scotch.io/tutorials/javascript/angularjs-form-validation

<ul ng-repeat="input in inputs">
        <li><span>{{input.name}} : </span>

            <div ng-switch="input.type" ng-form="myfrm">
                <div ng-switch-when="text">
                    <input type="text" ng-model="outputs[input.name]"/>
                </div>
                <div ng-switch-when="email" class="form-group" >
                    <input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required">
                    <P ng-show="myfrm.input.$invalid  && !myform.input.$pristine">Please enter a valid email</P>


                </div>
                <div ng-switch-when="number">
                    <input type="number" ng-model="outputs[input.name]"  ng-required="input.required" name="input"/>
                     <P ng-if="myfrm.input.$invalid">Please enter a valid number</P>
                </div>
                <div ng-switch-when="url">
                    <input type="number" ng-model="outputs[input.name]"/>
                </div>
                <div ng-switch-when="checkbox">
                    <input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/>
                </div>
            </div>
        </li>
    </ul>

Answer 1

There is a typo where you use $pristine , the myform should be myfrm like you set in ng-form :

<p ng-show="myfrm.input.$invalid && !myfrm.input.$pristine">Please enter a valid email</p>

To show different messages for invalid email and empty email, you could use $error instead of $invalid like this:

<p ng-show="myfrm.input.$error.email && !myfrm.input.$pristine">Please enter a valid email</p>
<p ng-show="myfrm.input.$error.required && !myfrm.input.$pristine">Please enter the email</p>

Example Plunker: http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview