非常基本的示例 - 启用或禁用按钮

Question

我有这个非常基本的例子。这也应该适用于多个输入的表单。

我想要一个没有任何必需参数的表单。但我只想在其中至少一个不为空的情况下启用该按钮。

$pristine 几乎可以工作。 问题是，如果我输入内容并删除它，按钮仍然处于启用状态。

基本上，

如果所有字段为空 -> 按钮禁用

如果至少有一个不为空则否则 -> 启用按钮

function ctrl($scope){
    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' ng-model='myName'/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="myForm.$pristine" />
    {{myForm.$pristine}}
</form>
</div>

Answer 1

Pristine 检查输入字段是否被触摸。这就是为什么在您删除输入后它仍然处于启用状态。检查有效并提供一些条件。或者使用模式和正则表达式。

Answer 2

带有`required`：

    function ctrl($scope) {
       
    }

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app>
    <form name="myForm" ng-controller="ctrl">
        <input type="text" ng-model="name" name='myName' ng-model='myName' required/>
        <span>{{name}}</span>
        <input type="submit" value="Submit"  ng-disabled="myForm.$invalid"/>
    </form>
    </div>

无需使用控制器：

function ctrl($scope) {
    $scope.isDisable = true;
    $scope.validate = function(){
      if($scope.name == undefined || $scope.name == ""){
            $scope.isDisable = true;
      } else {
            $scope.isDisable = false;
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' ng-model='myName' ng-keyup = "validate()"/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="isDisable"/>
</form>
</div>

另一种使用 `name.length` 的方式：

function ctrl($scope) {
           
}

       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

        <div ng-app>
        <form name="myForm" ng-controller="ctrl">
            <input type="text" ng-model="name" name='myName'/>
            <span>{{name}}</span>
            <input type="submit" value="Submit"  ng-disabled="!name.length"/>{{name.length}}
        </form>
        </div>

注意：如果您不想使用 HTML5 验证，可以将您的表单标记为novalidate。

Answer 3

这是一种幼稚的方式，但您可以在 ng-disabled 中使用每个输入的 ng-model

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' />
    <input type="text" ng-model="fName" name='FirstName'/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="!(name || fName)" />
    {{myForm.$pristine}}
</form>
</div>

另外，您的代码有 2 个 ng-model 用于相同的输入

Answer 4

使用disabled="!name.length" 代替ng-disabled="myForm.$pristine"。

这将解决您的问题。以下是工作代码：

function ctrl($scope) {

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="myForm" ng-controller="ctrl">
  
    <input type="text" ng-model="name" name='myName' ng-model='myName' />
    
    <span>{{name}}</span>
    
    <input type="submit" value="Submit" ng-disabled="!name.length" />
    
 {{myForm.myName.$pristine}}
  </form>
  
</div>