javascript - validar - AngularJS no envía un valor de campo oculto

validar input angularjs

Question

Para un caso de uso específico, tengo que enviar un solo formulario de la "vieja manera". Significa que utilizo un formulario con action = "". La respuesta se transmite, por lo que no estoy recargando la página. Soy completamente consciente de que una aplicación AngularJS típica no enviaría un formulario de esa manera, pero hasta ahora no tengo otra opción.

Dicho esto, traté de poblar algunos campos ocultos de Angular:

<input type="hidden" name="someData" ng-model="data" /> {{data}}

Tenga en cuenta que se muestra el valor correcto en los datos.

El formulario se ve como una forma estándar:

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

Si presiono enviar, no se envía ningún valor al servidor. Si cambio el campo de entrada para escribir "text", funciona como se esperaba. Mi suposición es que el campo oculto no está realmente poblado, mientras que el campo de texto en realidad se muestra debido al enlace bidireccional.

¿Alguna idea de cómo puedo enviar un campo oculto poblado por AngularJS?

Answer 1

Asigne directamente el valor al modelo en el atributo data-ng-value . Dado que el intérprete angular no reconoce los campos ocultos como parte de ngModel.

<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>

Answer 2

Debajo del Código funcionará para este IFF en el mismo orden en que se menciona, asegúrese de que el orden sea tipo, nombre, ng-modelo ng-init, valor. Eso es.

Answer 3

En caso de que alguien todavía tenga dificultades con esto, tuve un problema similar cuando traté de hacer un seguimiento de la sesión del usuario / ID de usuario en forma de páginas múltiples

Lo he arreglado añadiendo

.when ("/ q2 /: uid" en el enrutamiento:

    .when("/q2/:uid", {
        templateUrl: "partials/q2.html",
        controller: ''formController'',
        paramExample: uid
    })

Y agregó esto como un campo oculto para pasar los parámetros entre las páginas webform

<< input type = "hidden" required ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Soy nuevo en Angular, así que no estoy seguro de que sea la mejor solución posible, pero parece funcionar bien ahora.

Answer 4

En el controlador:

$scope.entityId = $routeParams.entityId;

En la vista:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />

Answer 5

Encontré un comportamiento extraño sobre este valor oculto () y no podemos hacer que funcione.

Después de jugar, encontramos que la mejor manera es simplemente definir el valor en el controlador después del alcance del formulario.

.controller(''AddController'', [$scope, $http, $state, $stateParams, function($scope, $http, $state, $stateParams) {

    $scope.routineForm = {};
    $scope.routineForm.hiddenfield1 = "whatever_value_you_pass_on";

    $scope.sendData = function {

// JSON http post action to API 
}

}])

Answer 6

Encontré una buena solución escrita por Mike en sapiensworks . Es tan simple como usar una directiva que observa los cambios en su modelo:

.directive(''ngUpdateHidden'',function() {
    return function(scope, el, attr) {
        var model = attr[''ngModel''];
        scope.$watch(model, function(nv) {
            el.val(nv);
        });
    };
})

y luego unir su entrada:

<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

Pero la solución provista por tymeJV podría ser mejor ya que la entrada oculta no activa el evento de cambio en javascript como yycorman contó en this publicación, por lo tanto, al cambiar el valor a través de un plugin jQuery seguirá funcionando.

Editar He cambiado la directiva para aplicar un nuevo valor al modelo cuando se activa el evento de cambio, por lo que funcionará como un texto de entrada.

.directive(''ngUpdateHidden'', function () {
    return {
        restrict: ''AE'', //attribute or element
        scope: {},
        replace: true,
        require: ''ngModel'',
        link: function ($scope, elem, attr, ngModel) {
            $scope.$watch(ngModel, function (nv) {
                elem.val(nv);
            });
            elem.change(function () { //bind the change event to hidden input
                $scope.$apply(function () {
                    ngModel.$setViewValue(  elem.val());
                });
            });
        }
    };
})

por lo tanto, cuando active $("#yourInputHidden").trigger(''change'') con jQuery, también actualizará el modelo enlazado.

Answer 7

Logré esto vía -

 <p style="display:none">{{user.role="store_user"}}</p>

Answer 8

No puede usar el doble enlace con el campo oculto. La solución es usar paréntesis:

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

EDITAR: Ver este hilo en github: https://github.com/angular/angular.js/pull/2574

EDITAR:

Desde Angular 1.2, puede usar la directiva ''ng-value'' para vincular una expresión al atributo de valor de la entrada. Esta directiva debe usarse con entrada de radio o casilla de verificación pero funciona bien con entrada oculta.

Aquí está la solución que usa ng-value:

<input type="hidden" name="someData" ng-value="data" />

Aquí hay un violín que usa ng-value con una entrada oculta: http://jsfiddle.net/6SD9N

Answer 9

Siempre puede usar un type=text y display:none; ya que Angular ignora los elementos ocultos. Como dice OP, normalmente no harías esto, pero parece un caso especial.

<input type="text" name="someData" ng-model="data" style="display: none;"/>

Answer 10

Tuve que enfrentar el mismo problema, realmente necesito enviar una clave de mi script jsp a java. Pasó alrededor de 4 horas o más de mi día para resolverlo.

Incluyo esta etiqueta en mi JavaScript / JSP:

 $scope.sucessMessage = function (){  
     var message =     ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id);
     $scope.inforMessage = message;
     alert(message);  
}
 

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

<!-- Messages definition -->
<input type="hidden"  name="sucess"   ng-init="messages.sucess=''<fmt:message  key=''portfolio.create.sucessMessage'' />''" >

<!-- Message showed affter insert -->
<div class="alert alert-info" ng-show="(inforMessage.length > 0)">
    {{inforMessage}}
</div>

<!-- properties
  portfolio.create.sucessMessage=Portf/u00f3lio {0} criado com sucesso! ID={1}. -->

El resultado fue: Portfólio 1 criado com sucesso! ID = 3.

Atentamente

Answer 11

Uso un Javascript clásico para establecer el valor de la entrada oculta

$scope.SetPersonValue = function (PersonValue)
{
    document.getElementById(''TypeOfPerson'').value = PersonValue;
    if (PersonValue != ''person'')
    {
        document.getElementById(''Discount'').checked = false;
        $scope.isCollapsed = true;
    }
    else
    {
        $scope.isCollapsed = false;
    }
}

Answer 12

actualiza la respuesta de @tymeJV por ejemplo:

 <div style="display: none">
    <input type="text" name=''price'' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
 </div>