从frontEnd禁用按钮

Question

我正在尝试使用AngularJS禁用按钮

<button
    type="submit"
    ng-disabled="emailConfig.$invalid"
    ng-click="createEmailconfig()"
    class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
    name="submit"
    id="submit"
>
    <span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
    </span>Submit
</button>

如果表单无效或不符合特定长度，则应禁用该按钮。然而，它并没有像它应该的那样工作。

有人能帮帮我吗？

Answer 1

你所需要做的就是向输入字段添加ng-maxlength指令，表单将会被你当前的代码禁用，看看这个基本的工作示例吧！

​

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <form action="" name="emailConfig" novalidate>
    <input name="input" ng-model="userType" ng-maxlength="5" required>
    <button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
                                <span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
                                </span>Submit
                            </button>
  </form>
</div>

​

Answer 2

对@Naren Murali回答的一些补充

您的示例中没有ng-model和输入。您可以使用必需的属性和ng-model来验证字段。

使用ng-model：

<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button> 
</form>
</div>

注意:在表单标签上设置novalidate属性，这样默认的HTML5验证就会被你应用程序中的Angular覆盖。

您可以使用所需的属性和表单名称来验证表单。

对于您的示例：

<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng- 
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>