Angularjs : check if input is empty with ng-form

Question

My code is the following :

<ng-form name="invitationForm">
<div ng-repeat="email in emails" ng-form='lineForm'>
    <div class="has-feedback" ng-class="{'has-error': lineForm.$invalid && lineForm.input, 'has-success': lineForm.input && !lineForm.$invalid}">
        <label class="control-label sr-only" for="inputSuccess">Input with success</label>
        <input ng-change="inputCheck($index)" id="inputSuccess" placeholder="Enter your friend's email" name="input" ng-model="email.value"  class="form-control input-mini" aria-describedby="inputSuccessStatus" type="email" />
    </div>
</div>
</ng-form>

What I want to do is have the div with class "has-feedback" have class "has-error" when the lineForm is invalid and the input is not empty. I put the condition lineform.$invalid && lineForm.input but lineForm.input doesn't seem to be working. I also tried lineForm.input.length to no avail.

Thanks

I think you are over complicating things. If you are using angular 1.3, read through yearofmoo's article on forms and validations - yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html — Scorpion-Prince
– Scorpion-Prince, Commented Dec 4, 2014 at 21:48

marko · Accepted Answer · 2014-12-05 01:27:41Z

1

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

I don't think you need to create that many forms. Check out this example (several elements with required input:

<form role="form" name="theform">

  <div ng-repeat="number in [1,2,3]">
    <input type="text" 
           name="{{$index}}" 
           ng-model="number" 
           required="" />
  </div>

  {{ theform.$valid ? 'yes, valid form' : 'no, invalid' }}

  <br/><br/>

  <div ng-repeat="element in theform">
    {{ element.$valid }}
  </div>

   <br/>
   Explore this:
   <br/><br/>
   {{ theform }}

</form>

For further examples on what you can do with the formController: https://docs.angularjs.org/api/ng/type/form.FormController

answered Dec 5, 2014 at 1:27

marko

2,8211 gold badge33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs : check if input is empty with ng-form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related