Question

我的表格如下：

    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="nomargin">Let us know your concern or question and we will try to respond within 24 hours.</h4>
</div>
<div class="modal-body paddingmodal2">
    <form id="support-form" name="supportForm"  class="nobottommargin" novalidate="">
      <div class="col_full">
            <label for="login-form-username">Description <small>*</small></label>
            <textarea rows="4" cols="50" type="text"  ng-class="{'error': submitted && supportForm.description.$error.required}" id="login-form-username" name="username" class="sm-form-control" ng-model = 'support.description' required/>
        </div>
        <div class="alert" role="alert" ng-class="{'alert-danger':!isLoginSuccess, 'alert-success':isLoginSuccess}" ng-show="isShowLoginAlert" ng-bind="loginSubmitStatusMsg"></div>
        <div class="col_full nobottommargin no-margin-col-full">
            <button type="submit" class="button button-3d button-black nomargin col_full" id="login-form-submit" name="submit-bt" ng-click="saveSupportData(supportForm,support)" ng-disabled="isDisableLoginBtn">Submit</button>
        </div>

    </form>
</div>

JavaScript的：

$scope.saveSupportData = function(supportForm,data){
                 if(supportForm.$invalid){
                    return;
                }
}

当我点击按钮时，文本区域边框应该突出显示但不会发生。

请有人建议帮助。

Answer 1

表单是FormController的一个实例。表单实例可以   可选地使用name属性发布到范围中。

类似地，具有ngModel指令的输入控件包含   NgModelController的实例。这样的控件实例可以   使用name属性作为表单实例的属性发布   在输入控件上。 name属性指定的名称   表单实例上的属性。

这意味着表单和控件的内部状态   可以使用标准绑定在视图中进行绑定   原语。

这允许我们使用以下功能扩展上述示例：

用户与a交互后显示的自定义错误消息   控制（即设置$ touch时）显示自定义错误消息   在提交表格（提交已设置）时，即使用户没有   与控件交互

应该是

ng-class="{'error': submitted && supportForm.username.$error.required}"

因为您的字段名称是用户名。发布表单时提交的内容应为true 试试这个

$scope.saveSupportData = function(supportForm,data){
    $scope.submitted=true;
     if(supportForm.$invalid){
      return;
   }
}

如何在Angular.js中执行验证

1 个答案: