Html 禁用该按钮，直到输入字段被填充，否则无法工作_Html_Angularjs_Twitter Bootstrap

Html 禁用该按钮，直到输入字段被填充，否则无法工作

html angularjs twitter-bootstrap

Html 禁用该按钮，直到输入字段被填充，否则无法工作,html,angularjs,twitter-bootstrap,Html,Angularjs,Twitter Bootstrap,我想禁用submit按钮，直到使用angularjs/bootstrap在页面中填充所有输入字段。我尝试使用ng disabled=“myForm.$invalid”但似乎不起作用。有什么意见吗 HTML代码 <form name="myForm" ng-controller="ExampleController"> <div>Select Color : </div> <label name="team" ng-repeat="co

我想禁用submit按钮，直到使用angularjs/bootstrap在页面中填充所有输入字段。我尝试使用

ng disabled=“myForm.$invalid”

但似乎不起作用。有什么意见吗

HTML代码

<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                        <input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" name="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            <br>
  <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>
</form>


选择颜色：
{{color}}



请选择颜色
用户名：
用户名是必需的


提交

我认为您没有为复选框和文本框添加ng模型

你能查一下下面的代码吗


示例-示例复选框输入指令生产
angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.colorNames=[“红色”、“蓝色”、“黑色”]；
$scope.selectedColor=[]；
$scope.userSelection=函数userSelection（团队）{
var idx=$scope.selectedColor.indexOf（团队）；
如果（idx>-1）{
$scope.selectedColor.splice（idx，1）；
}
否则{
$scope.selectedColor.push（团队）；
}
};
$scope.submitForm=function（）{
如果（$scope.selectedColor！=“”&&&$scope.selectedColor！=未定义&&&$scope.user！=“”&&&$scope.user！=未定义）{
警报（“已输入所有字段”）；
}否则{
}
} 
}]);
选择颜色：
{{color}}



请选择颜色
用户名：
用户名是必需的


提交

我认为您没有为复选框和文本框添加ng模型

你能查一下下面的代码吗


示例-示例复选框输入指令生产
angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.colorNames=[“红色”、“蓝色”、“黑色”]；
$scope.selectedColor=[]；
$scope.userSelection=函数userSelection（团队）{
var idx=$scope.selectedColor.indexOf（团队）；
如果（idx>-1）{
$scope.selectedColor.splice（idx，1）；
}
否则{
$scope.selectedColor.push（团队）；
}
};
$scope.submitForm=function（）{
如果（$scope.selectedColor！=“”&&&$scope.selectedColor！=未定义&&&$scope.user！=“”&&&$scope.user！=未定义）{
警报（“已输入所有字段”）；
}否则{
}
} 
}]);
选择颜色：
{{color}}



请选择颜色
用户名：
用户名是必需的


提交

您将条件写错了。请写入ng disabled=“！myForm.$invalid”。此外，在html中写入{{myForm.$invalid}}将显示其当前值，而在您的示例中，该值为false

    <form name="myForm" ng-controller="ExampleController">
       <div>Select Color : </div>
          <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                            <input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                      <br>  </label><br>
                    <div ng-show="myForm.$submitted || myForm.color.$touched">
                        <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                    </div>
                <div class="">
                    <div style="color: black;">Username : </div>
                   <input type="text" name="user" value="" required>
                    <div ng-show="myForm.$submitted || myForm.user.$touched">
                        <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                    </div>
                </div>
                <br>
{{myForm.$invalid}}
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="!myForm.$invalid">Submit</button>
    </form>


选择颜色：
{{color}}



请选择颜色
用户名：
用户名是必需的


{{myForm.$invalid}}
提交

您将条件写错了。请写入ng disabled=“！myForm.$invalid”。此外，在html中写入{{myForm.$invalid}}将显示其当前值，而在您的示例中，该值为false

    <form name="myForm" ng-controller="ExampleController">
       <div>Select Color : </div>
          <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                            <input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)" required> {{color}}
                      <br>  </label><br>
                    <div ng-show="myForm.$submitted || myForm.color.$touched">
                        <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                    </div>
                <div class="">
                    <div style="color: black;">Username : </div>
                   <input type="text" name="user" value="" required>
                    <div ng-show="myForm.$submitted || myForm.user.$touched">
                        <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                    </div>
                </div>
                <br>
{{myForm.$invalid}}
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="!myForm.$invalid">Submit</button>
    </form>


选择颜色：
{{color}}



请选择颜色
用户名：
用户名是必需的


{{myForm.$invalid}}
提交

将

ng型号

添加到输入字段

  <input type="text" name="user" value="" ng-model="user" required>

将

ng型号

添加到输入字段

  <input type="text" name="user" value="" ng-model="user" required>

您还需要做两件事， 1.对所有输入使用ng required，而不是required。并添加ng模型对于所有输入。 2.对于复选框，您需要检查是否至少有一个复选框处于选中状态挑选出来的。如果选择了一个，则可以使ng required=false。为此，您可以检查所选颜色的长度是否更大比0

PFB修改后的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

</head>
<body ng-app="checkboxExample">
  <script>  
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.colorNames = ['RED', 'BLUE', 'BLACK'];
        $scope.selectedColor = [];
        $scope.userSelection = function userSelection(team) {
            var idx = $scope.selectedColor.indexOf(team);
          if (idx > -1) {
                $scope.selectedColor.splice(idx, 1);
            }
            else {
                $scope.selectedColor.push(team);
            }
        };
        $scope.submitForm = function(){
            if ($scope.selectedColor != "" && $scope.selectedColor != undefined && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{

            }
        } 


    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <div>Select Color : </div>
      <label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
                        <input type="checkbox" ng-model="checked" name="color" ng-required="selectedColor.length==0" value="{{color}}" ng-click="userSelection(color)" > {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="myForm.color.$error.required">Please Select the color</p>
                </div>
            <div class="">
                <div style="color: black;">Username : </div>
              <input type="text" name="user" value="" ng-model="user" ng-required="true">
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            <br>
  <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)" ng-disabled="myForm.$invalid">Submit</button>



</form>
</body>
</html>


示例-示例复选框输入指令生产
angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，fu