Отключить кнопку от 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

некоторое дополнение к ответу @Naren Murali

У вас нет ng-модели и входных данных в вашем примере.Вы можете проверить поле с помощью обязательного атрибута и ng-модели.

Используя 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>

Answer 2

все, что вам нужно сделать, это добавить директиву 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>