Forma AngularJS y valores nulos / vacíos

Question

Apr 19, 2015, 05:38 AM

javascript angularjs html angularjs-scope

Forma AngularJS y valores nulos / vacíos

Estoy trabajando con un formulario AngularJS algo dinámico. En otras palabras, puedo agregar filas de campos de entrada, etc. Así que mi enfoque fue comenzar con un$scope.formData objeto vacío, para encapsular todas las propiedades que están vinculadas a elementos de formulario HTML estáticos y dinámicos.

El código AngularJS es el siguiente:

(function() {
    var formApp = angular.module("formApp", []);
    formApp.controller("FormCtrl", function ($scope, $timeout) {
        $scope.formData = {};
        $scope.formData.subscribers = [
            { name: null, email: null }
        ];
        $scope.addSubscriber = function() {
            $scope.formData.subscribers.push({ name: null, email: null });
        };
    });
})();

El HTML para el formulario AngularJS:

<body data-ng-app="formApp">
    <div data-ng-controller="FormCtrl">
        <p>
            Name of Topic: <input type="text" data-ng-model="formData.title" placeholder="enter a title" />
        </p>
        Subscribers:
        <button data-ng-click="addSubscriber()">Add subscriber</button>
        <table>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
            <tr data-ng-repeat="subscriber in formData.subscribers">
                <td><input type="text" data-ng-model="subscriber.name" placeholder="enter name" /></td>
                <td><input type="text" data-ng-model="subscriber.email" placeholder="enter email" /></td>
            </tr>
        </table>
        <hr style="margin:1em 0;" />
        <p>
            <em>Debug info</em>: {{ formData }}
        </p>
    </div>
</body>

Nota laInformación de depuración sección al final, que muestra el$scope.formData objeto y sus contenidos. Tengo un par de problemas con la forma en que implementé este formulario.

Cuando la página se carga por primera vez, no hayformData.title propiedad en el$scope, pero como está vinculado al campo de texto de entrada Título, cuando empiezo a escribir un valor, eltitle la propiedad se agrega a la$scope. Sin embargo, cuando elimino el valor en el campo de texto de entrada, elformData.title propiedad todavía existe en el$scope como una cadena vacía Supongo que esto está bien, pero realmente quiero limpiar los valores vacíos o nulos al enviar el formulario. Me gustaría hacerlo en el lado del cliente si es fácil hacerlo, para que el código del lado del servidor no tenga que limpiar nada.Con la dinámicaSuscriptores sección, puedo seguir agregando tantas filas como quiera, pero en última instancia, me gustaría filtrar todas las vacíasabonado objetos en el lado del cliente.

¿AngularJS tiene alguna opción para detectar y limpiar valores nulos / vacíos en el$scope antes de un procesamiento posterior, como un$http ¿ENVIAR?

Nota He establecido unjsFiddle para este ejemplo