1

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

1 Answer 1

2

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}">
Sign up to request clarification or add additional context in comments.

2 Comments

I run in plunker and shown added the has-error class in span tag if error
you are correct about the form. in one <form> my page looks bad but it works, but on the other it looks good and dosent 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.