Html 检索表单的字段

Html 检索表单的字段,html,angularjs,Html,Angularjs,我想从表单中检索数据,但我得到的唯一结果是在JSON的所有字段中都没有定义。我不想使用$scope变量。相反,我有一个var“vm”来保存控制器 empleados.html <!--Modal--> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" > &

我想从表单中检索数据,但我得到的唯一结果是在JSON的所有字段中都没有定义。我不想使用$scope变量。相反,我有一个var“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>

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

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

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

这样,它就永远不会进入函数。我试着将提交按钮改为输入,但没有改变任何东西检查这里的工作演示。当您填写所有必填字段时,使用按钮触发submit函数。(如果没有,您必须使用
ng-app
指令)我不知道为什么,复制您的代码起作用了,我也和您一样做了,但现在起作用了。谢谢:)
<form id="formNuevoEmpleado" ng-submit="vm.submit()" ng-controller="empleadoController as vm">
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);

}