Question

我正在学习，我在注册表单中使用引导表单字段，但是使用下面的代码验证并没有显示我犯了什么错误，请有人帮助我。自早上部分以来，我就面临这个问题。请给我建议一个

    <form name="studentForm" ng-submit="saveEmployee()">

        <div class="panel panel-primary">

            <div class="panel-heading">
                <h3 class="panel-title">Welcome</h3>
            </div>

            <div class="panel-body">

       <div class="form-group" ng-class="{'has-error': studentForm.gender.$touched && studentForm.gender.$invalid,
                'has-success': studentForm.gender.$valid }">
                    <label for="gender" class="control-label">Gender</label>
                    <div class="form-control">
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="male" ng-model="employee.gender" required>
                            Male
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="female" ng-model="employee.gender" required>
                            FeMale
                        </label>
                    </div>
                    <span class="help-block" ng-if="studentForm.gender.$invalid && studentForm.gender.$touched">
                        Gender is required
                    </span>
                </div>

                <div class="form-group" ng-class="{'has-error': studentForm.isActive.$invalid && 
                studentForm.isActive.$touched">
                    <label for="isActive" class="control-label">User Status</label>
                    <div class="form-control">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="isActive" ng-model="employee.isActive" required>
                            IsActive
                        </label>
                    </div>
                    <span class="help-block" ng-if="studentForm.isActive.$touched && studentForm.isActive.$invalid">
                        Is Active is required
                    </span>
                </div>

                <div class="form-group" ng-class="{'has-error': studentForm.department.$invalid && 
                studentForm.department.$touched">
                    <label for="department" class="contolr-label">DepartMent</label>
                    <select id="department" name="department" ng-model="employee.department" class="form-control" required>
                        <option value=''>Select Department</option>
                        <option ng-repeat="dept in departments" value="{{dept.deptId}}">
                            {{dept.Name}}
                        </option>
                    </select>
                    <span class="help-block" ng-if="studentForm.department.invalid && studentForm.department.touched">
                        Department selection is required
                    </span>
        </div>
      </div>
   </form>

Answer 1

您可以使用验证而不提交表单。在这种情况下，请先检查您的表单输入必填字段，然后再将数据发送到后端（如果可以的话）。

<form id="form" name="from" class="form-horizontal">
        <div class="panel panel-primary">

            <div class="panel-heading">
                <h3 class="panel-title">Welcome</h3>
            </div>

            <div class="panel-body">

       <div class="form-group" ng-class="{'has-error': studentForm.gender.$touched && studentForm.gender.$invalid,
                'has-success': studentForm.gender.$valid }">
                    <label for="gender" class="control-label">Gender</label>
                    <div class="form-control">
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="male" ng-model="employee.gender" required>
                            Male
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="female" ng-model="employee.gender" required>
                            FeMale
                        </label>
                    </div>
                    <span class="help-block" ng-if="studentForm.gender.$invalid && studentForm.gender.$touched">
                        Gender is required
                    </span>
                </div>

                <div class="form-group" ng-class="{'has-error': studentForm.isActive.$invalid && 
                studentForm.isActive.$touched">
                    <label for="isActive" class="control-label">User Status</label>
                    <div class="form-control">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="isActive" ng-model="employee.isActive" required>
                            IsActive
                        </label>
                    </div>
                    <span class="help-block" ng-if="studentForm.isActive.$touched && studentForm.isActive.$invalid">
                        Is Active is required
                    </span>
                </div>

                <div class="form-group" ng-class="{'has-error': studentForm.department.$invalid && 
                studentForm.department.$touched">
                    <label for="department" class="contolr-label">DepartMent</label>
                    <select id="department" name="department" ng-model="employee.department" class="form-control" required>
                        <option value=''>Select Department</option>
                        <option ng-repeat="dept in departments" value="{{dept.deptId}}">
                            {{dept.Name}}
                        </option>
                    </select>
                    <span class="help-block" ng-if="studentForm.department.invalid && studentForm.department.touched">
                        Department selection is required
                    </span>
        </div>
         <button style="padding:9px;"  class="button btn-success round mr-1 mb-1 btn-mid" ng-click="form.$valid && saveEmployee()"  id="btnSave">
            Submit
        </button>
      </div>
   </form>

希望对您有帮助。

Bootstrap表单验证在AngularJS中不起作用

1 个答案: