Функция не отключена Кнопка NEXT

Question

Я пытаюсь сделать проверку в AngularJS. Я хочу выполнить проверку max и min. Я написал для этого функцию и вызвал эту функцию в файле HTML. Функция отображает сообщение об ошибке, но не может отключить следующую кнопку и принять неверный ввод. вот мой Funtion

$scope.validate = function(NetProfit) { 
    if (NetProfit < 100000 || NetProfit > 20000000) 
    { 
     $scope.greeting = 'Please enter a value between 100000 and 20000000.';   
    } 
    else 
    { 
     $scope.greeting = '';   
    } 
}; 

вот мой HTML код

<input ng-model="NetProfit" name="NetProfit" id="NetProfit" type="text" ng-pattern="/^\d+$/" ng-change='validate(NetProfit)' class="zoomIn" placeholder="Your Annual Net Profit" required> 
<p class="ErrorMessage"> 
    {{greeting}} 
</p> 
<p class="ErrorMessage" ng-show="step5form.NetProfit.$error.pattern"> 
    Annual net profit cannot be characters. 
</p> 
<button class="Submit" ng-disabled="!step5form.$valid" ng-click="step = 6">Next</button> 

Answer 1

если вы не хотите, чтобы изменить весь код, просто добавьте ниже || (OR) состояния вашей следующей кнопке.

<button class="Submit" ng-disabled="!step5form.$valid || greeting!='' " ng-click="step = 6">Next</button> 

здесь работает бухнуться https://plnkr.co/edit/yOdQO2TMxjmLVV14u5ub?p=preview

Answer 2

Функция, которую написал, чтобы показать сообщение ($scope.greeting) не используется для формы проверки в AngularJS. Таким образом, в этом случае кнопка будет, вероятно, будет отключена, если:

• required не fullfilled (ничего не вошел)
• Узор в ng-pattern не fullfilled (не цифра)

Но вы не писал/не использовал правильный валидатор для обработки случая min/max. Самым простым решением было бы перейти на вход type=number и использовать ограничения min и max. Например:

<input ng-model="NetProfit" 
    name="NetProfit" id="NetProfit" 
    type="number" 
    ng-pattern="/^\d+$/" 
    ng-change='validate(NetProfit)' 
    class="zoomIn" placeholder="Your Annual Net Profit" 
    required 
    min="100000" max="20000000"> 

Это должен правильно применять валидации и отключить кнопку, как вы можете увидеть here.

Это также позволяет использовать проверку формы для отображения этих сообщений, аналогично тому, как это делается для шаблона. Например:

<p class="ErrorMessage" ng-show="step5form.NetProfit.$error.min">Annual net profit cannot be less than 100000.</p> 
<p class="ErrorMessage" ng-show="step5form.NetProfit.$error.max">Annual net profit cannot be more than 20000000.</p> 

Или показать что-то подобное в качестве пользовательского сообщения:

<p class="ErrorMessage" ng-show="step5form.NetProfit.$error.min || step5form.NetProfit.$error.max"> 
    Please enter a value between 100000 and 20000000. 
</p>