[[object Object]] in input text angularjs

Question

<form class="form-horizontal" role="form" name="addCreditoBuscar" id="addCreditoBuscar" ng-controller="AddCreditoAppController">
 <div class="form-group">
  <label class="col-sm-2 col-sm-2 control-label">Buscar</label>
   <div class="col-sm-10">
    <input type="text" class="form-control" name="buscar" ng-model="addCreditoBuscar.buscar" ng-required="true" placeholder="Buscar por cedula, nombre o apellido">
    <span class="help-block" ng-show="addCreditoBuscar.buscar.$error.required">Este campo es requerido es requerido.</span>
   </div>
  </div>
</form>

This is my code for a input text, but the result is this one - http://prntscr.com/73otmc

You are getting this as addCreditoBuscar.buscar is an object. — Satpal
– Satpal, Commented May 10, 2015 at 16:35
possible duplicate of Access / process (nested) objects, arrays or JSON — charlietfl
– charlietfl, Commented May 10, 2015 at 16:52
put this beside input and see exactly what object looks like in the view <pre>{{addCreditoBuscar.buscar | json}}</pre> — charlietfl
– charlietfl, Commented May 10, 2015 at 16:55

ricardoasensio · Accepted Answer · 2017-03-26 14:18:26Z

7

The solution is simple. You are using the same "form name" than the object you want to put. Change the "Form name" to one different like name="formAddCreditoBuscar"

<form class="form-horizontal" role="form" name="formAddCreditoBuscar" id="addCreditoBuscar" ng-controller="AddCreditoAppController">

Then your problem would disappear

answered Mar 26, 2017 at 14:18

ricardoasensio

922 silver badges4 bronze badges

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

2 Comments

C0ZEN Over a year ago

Best answer here.

Nyerguds Over a year ago

Ahh, had this due to silly copy-paste errors. Adapted the [ngModel] linking, but forgot the name.

Josh Beam · Accepted Answer · 2015-05-10 16:40:47Z

Your input element is coercing the value you provided to a string. Your value is an object, so it is coercing it to the string value of that object ([[object Object]]).

To fix this, you need to access a property of that object.

ng-model="addCreditoBuscar.buscar" is an object, therefore it will show up as [[object Object]], as something like Object.prototype.toString() is acting on the object in order to coerce it to a string value in your input element.

For example:

var obj = {
    someProp: 'someVal'
};

console.log(''+a); // => "[object Object]"

The above demonstrates string coercion from an object.

If you would like to show a property from that object, simply use the object attribute accessor (the dot .):

addCreditoBuscar.buscar.whateverProperty

Therefore, whenever your input element coerces the property to a value, if the value is a string, it will show up as a string (which is your intended output):

console.log(''+a.someProp); // => "someVal"

Nicolas Janel · Accepted Answer · 2015-10-07 11:42:10Z

You could erase the displayed value by explicitly change the HTMLElement.value property at every change of your model value. You can create a directive to handle that.

app.directive('labelField', function () {
    return {
        restrict: 'AE',
        link: function ($scope, element, attrs) {
            $scope.$watch(attrs['ngModel'], function (newValue) {
                if (newValue) {
                    element[0].value = newValue[attrs['labelField']];
                }
            })
        }
    }
})

use it by passing the field to display in the directive

<input type="text" ng-model="myobject" label-field="myfield">

E.g. to store in $scope.user an object like {name:"John","email":"[email protected]"}, you would use it like that :

<input type="text" ng-model="user" label-field="name">

Collectives™ on Stack Overflow

[[object Object]] in input text angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related