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>

我的上述代码未选中时未能在复选框下方显示错误消息。我想显示错误消息＆＃34;请选择颜色＆＃34;当用户单击提交按钮而不选择至少一个复选框时，在复选框下方。当用户单击任何复选框时，错误消息应该消失。

Answer 1

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

如果您不选择颜色，则需要使用复选框，选择颜色时，则表示不需要。

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

复选框验证未按预期工作

1 个答案: