CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Yogi_Bear
Yogi_Bear

Reputation: 594

How to set Twitter Bootstrap class to error based on AngularJS input class $invalid?

I dont know how to make an error on bootstrap if Angular is invalid. tried to use this link: but with no help. http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/
what am I doing wrong?
um

<div class="form-group">
    <label class="col-md-1" for="totalWeight">Total Weight</label>
    <div class="col-md-1">
        <input class="form-control" type="number" max="3000" min="0" name="totalWeight" ng-model="totalWeight" ng-change="calcData()" required>
        <span style="color:red" ng-class="{ 'has-error':pasteForm.totalWeight.$dirty && pasteForm.totalWeight.$invalid"}>
            <br /><span ng-show="pasteForm.totalWeight.$error.required">Total Weight is required!</span>
            <span ng-show="pasteForm.totalWeight.$error.max">Max value 3000!</span>
        </span>
    </div>
    <label class="col-md-1" for="num">%Number</label>
    <div class="col-md-1">
        <input class="form-control" name="num" type="number" min="0" max="100" ng-model="num" ng-minlength="0" ng-change="calcData()" required>
        <span style="color:red" ng-show="pasteForm.num.$dirty && pasteForm.num.$invalid">
            <br /><span ng-show="pasteForm.num.$error.required">Num is required!</span>
            <span ng-show="pasteForm.num.$error.max">Max value 100!</span>
        </span>
    </div>
</div>

From one of the answers I need a <form> tag. in one tag it works but in the other it doesn't, why?

You are correct about the form. in one <form> my page looks bad but it works, but on the other it looks good and doesn't work.

help?

<form ng-controller="someName" class="mainDataDiv" id="someName2" novalidate ng-cloak> //here it works

<form id="main-panel" class="col-lg-12" ng-controller="someName" novalidate ng-cloak> // here it dosent works

Upvotes: 1

Views: 106

Answers (1)

Shaishab Roy
Shaishab Roy

Reputation: 16805

You missed <form></form> tag

use like :

<form name="pasteForm">
   ....
</form>

and syntax error: " should be after } in span tag. use }"> instead of "}> and use or operator (||) instead of and operator (&&)

<span style="color:red" ng-class="{ 'has-error':pasteForm.totalWeight.$dirty || pasteForm.totalWeight.$invalid}">

Upvotes: 2

Related Questions