Harsh sachdev Harsh sachdev - 4 months ago 20
AngularJS Question

object Object in text box

i have a bootstrap model

<div id="otpModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Enter OTP</h4>
</div>
<div class="modal-body">
<form class="form-otp" name="otp" ng-submit="enterOtp()" >

<div class="row col s6">
<p>A verification code has been sent to your mobile by SMS. Please enter the verification code.
</p>
<input type="text" id="otp" placeholder="enter your OTP code" name="otpName" class="validate" maxlength="6" ng-pattern="/^[0-9]{4,6}$/" ng-model="otp" required>
</div>
<p id="otpMsg" style="color:#e52424"></p>

<a href="#" ng-click="resendOtp()">Resend ?</a>
<button type="submit" ng-disabled="form-otp.$invalid" class="waves-effect waves-light btn done">
<i class="material-icons left">done</i> Done
</button>
</form>
</div>

</div>

</div>
</div>


i have a controller in which enterOtp() & resendOtp() is defined. Problem is text box with name "otpName" is showing [object Object] in it .

Answer

Try changing

ng-model="otp"

to

ng-model="otp.name"

You are probably using the wrong field as ng-model.