Question

我想从表单中检索数据，但是我得到的唯一是在JSON的所有字段中都是未定义的。我不想使用$ scope变量。取而代之的是，我有一个变量“ vm”来保存控制器。

empleados.html

<!--Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Añadir empleado</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!--Form-->
                <form id="formNuevoEmpleado" ng-controller="empleadoController as vm">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="nifInput">NIF</label>
                            <input type="text" class="form-control" id="nifInput" ng-model="vm.nif" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="nombreInput">Nombre</label>
                            <input type="text" class="form-control" id="nombreInput" ng-model="vm.nombre" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="primerApellidoInput">Primer Apellido</label>
                            <input type="text" class="form-control" id="primerApellidoInput" ng-model="vm.primerApellido" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="segundoApellidoInput">Segundo Apellido</label>
                            <input type="text" class="form-control" id="segundoApellidoInput" ng-model="vm.segundoApellido" equired>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="fechaNacimientoInput">Fecha de nacimiento</label>
                        <input type="date" class="form-control" id="fechaNacimientoInput" ng-model="vm.fechaNacimiento" required>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="primerTelefonoInput">Primer teléfono</label>
                            <input type="tel" class="form-control" id="primerTelefonoInput" ng-model="vm.primerTelefono" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="segundoTelefonoInput">Segundo teléfono</label>
                            <input type="tel" class="form-control" id="segundoTelefonoInput" ng-model="vm.segundoTelefono" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="emailInput">Email</label>
                        <input type="email" class="form-control" id="emailInput" placeholder="name@futurespace.es" ng-model="vm.email" required>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label for="estadoCivilInput">Estado civil</label>
                            <select id="estadoCivilInput" class="form-control" ng-model="vm.estadoCivil">
                                <option selected>Soltero</option>
                                <option>Casado</option>
                            </select>
                        </div>
                        <div class="col">
                            <label for="servicioMilitarInput">Servicio Militar</label>
                            <select id="servicioMilitarInput" class="form-control" ng-model="vm.servicioMilitar">
                                <option selected>Si</option>
                                <option>No</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" id="enviarEmpleado" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

empleadoController.js

app.controller('empleadoController', function ($scope, empleadoService) {

    var vm = this;
    vm.empleados = {};

    empleadoService.getEmpleados().then(function (response) {
        console.log(response.data);
        vm.empleados = response.data;
    });

    $("#formNuevoEmpleado").submit(function () {
        var dataEmpleado = {
            nif: vm.nif,
            nombre: vm.nombre,
            primerApellido: vm.primerApellido,
            segundoApellido: vm.segundoApellido,
            fechaNacimiento: vm.fechaNacimiento,
            fechaAlta: new Date(),
            primerTelefono: vm.primerTelefono,
            segundoTelefono: vm.segundoTelefono,
            email: vm.email,
            estadoCivil: vm.estadoCivil,
            servicioMilitar: vm.servicioMilitar
        };
        console.log(dataEmpleado);
    })
});

检索数据后，我将使用REST服务将新员工的数据发送到我的数据库。

Answer 1

要使用angularjs提交表单，请在模板中使用ng-submit

<form id="formNuevoEmpleado" ng-submit="vm.submit()" ng-controller="empleadoController as vm">

并且在控制器中不使用JQuery，请使用Submit函数：

vm.submit = function() {
    var dataEmpleado = {
        nif: vm.nif,
        nombre: vm.nombre,
        primerApellido: vm.primerApellido,
        segundoApellido: vm.segundoApellido,
        fechaNacimiento: vm.fechaNacimiento,
        fechaAlta: new Date(),
        primerTelefono: vm.primerTelefono,
        segundoTelefono: vm.segundoTelefono,
        email: vm.email,
        estadoCivil: vm.estadoCivil,
        servicioMilitar: vm.servicioMilitar
    };
    console.log(dataEmpleado);

}

检索表单的字段

1 个答案: