CODEWITHSUNDEEP
angularjsformsinputis-empty
Komo
Komo

Reputation: 2138

Angularjs : check if input is empty with ng-form

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

Upvotes: 1

Views: 6044

Answers (1)

marko
marko

Reputation: 2831

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

Upvotes: 1

Related Questions