复选框验证未按预期工作

Question

我想在用户使用 bootstrap 和 angularjs 单击提交按钮时验证表单。如果表单中的任何字段为空白，我想在空白元素下方显示错误消息。

演示：https://plnkr.co/edit/55lFImusbCznYjLXypDu?p=preview

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)"> {{color}}
                  <br>  </label><br>
                <div ng-show="myForm.$submitted || myForm.color.$touched">
                    <p class="error-mesg" ng-show="headerForm.color.$error.required">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>
             <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
 </form>

我上面的代码在未选中时无法在复选框下方显示错误消息。当用户单击提交按钮而不选择至少一个复选框时，我想在复选框下方显示错误消息“请选择颜色”。当用户单击任何复选框，错误消息应该会消失。

Answer 1

您可以动态添加复选框输入所需的：ng-required="selectedColor.length === 0"

if you do not select color, checkboxs will be required, when color is selected, then is it unrequired.

<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">