Проверка формы начальной загрузки не работает в AngularJS

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>

Надеюсь, это поможет вам.