javascript - 使用 Angular JS 对表单提交进行复选框验证

Question

我是 Angular JS 新手。我创建了一个表单，底部有一个条款和协议(protocol)复选框。我的要求是，当用户单击提交按钮而不选中复选框时，应显示包含错误消息的 div。

目前，如果未选中该复选框，则其必填字段将显示为红色。我如何将提交功能绑定(bind)到 ng-click 上，并使用复选框检查和 ng-show a div。

我的 HTML 看起来像这样 -

    <p class="note">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="checkBoxText">
    <span class="mandatory">*</span>I agree to the Terms & conditions</span>
    </p>
    <div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div>

    <div style="float:right" class="buttonSimple">
        <a name="Register" id="RegisterUser" href="#" class="" ng:click="submitform(true)"><span>Registrieren</span></a>
    </div>

Answer 1

一个可能的解决方案是:-

1.) 在函数中

submitform()

您应该将一些随机变量名称设置为 true。说

$scope.buttonClicked=true;

2.) 在 HTML 代码中，

改变

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div>

至

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">Please select the Checkbox before submit</div>

仅当单击按钮并调用函数后，才会在作用域中设置buttonClicked 变量。并且在设置了buttonClicked 之前，您的消息的ng-show 将不会显示。

我相信这可以回答您的问题。