[[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, May 10 '15 at 16:35
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — charlietfl, May 10 '15 at 16:52
put this beside input and see exactly what object looks like in the view `
{{addCreditoBuscar.buscar | json}}
` — charlietfl, May 10 '15 at 16:55

score 6 · Accepted Answer · answered Mar 26 '17 at 14:18

6

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 '17 at 14:18

ricardoasensio

84
2
4

Best answer here. – C0ZEN Apr 21 '17 at 15:58
Ahh, had this due to silly copy-paste errors. Adapted the `[ngModel]` linking, but forgot the name. – Nyerguds Jan 06 '22 at 15:37

score 1 · Answer 2 · answered May 10 '15 at 16:40

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"

score 0 · Answer 3 · answered Oct 07 '15 at 11:42

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":"a@a.a"}, you would use it like that :

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

[[object Object]] in input text angularjs

3 Answers3