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

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

原始检查输入字段是否被触摸。这就是为什么在您删除输入后仍保持启用状态的原因。检查有效并提供一些条件。或使用pattern和regex。

Answer 2

使用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>

Answer 3

带有'required`：

yes | npm run eject

    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;
      }
    }
}

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

<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>

function ctrl($scope) {
           
}

注意：如果您不想使用HTML5验证，则可以标记表单 <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>。

Answer 4

这是一种幼稚的方法，但是您只能在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模型