Question

我有一个包含用户名，电子邮件和密码的注册表单，并同意条款和政策复选框。

问题在于，我已经以下列方式验证了所有其他输入类型，但它似乎不适用于复选框。

我只想在提交表单之前提醒用户他们需要同意政策，但它看起来像一块巨大的石头请帮助我们。谢谢！

<form ng-submit="form(signup.$valid)" name="signup">
<input type="checkbox" name="checkPolicy" required> Agree the <a href="#">terms and policy</a><p ng-show="signupForm.checkPolicy.$error.required && !signupForm.checkPolicy.$pristine" class="help-block">You must agree to our terms and policies.</p>
<button type="submit">Signup</button>
</form>

Answer 1

我认为，在选中所需的复选框之前，您的“注册”按钮保持禁用状态对您和用户都更直观。

Angular使ng-disabled：

非常容易

<form ng-submit="form(signup.$valid)" name="signup">
    <input type="checkbox" name="checkPolicy" ng-model="checkAgree"> Agree the <a href="#">terms and policy</a><p ng-show="signupForm.checkPolicy.$error.required && !signupForm.checkPolicy.$pristine" class="help-block">You must agree to our terms and policies.</p>
    <button type="submit" ng-disabled="!checkAgree">Signup</button>
</form>

奖金小提琴：http://jsfiddle.net/4ntwrc7c/

如果您想使用validate属性转到required路线，只需在复选框输入中添加ng-model即可。

<form ng-submit="form(signup.$valid)" name="signup">
    <input type="checkbox" name="checkPolicy" ng-model="checkAgree" required>
    Agree the <a href="#">terms and policy</a>
    <p ng-show="signupForm.checkPolicy.$error.required && !signupForm.checkPolicy.$pristine" class="help-block">You must agree to our terms and policies.</p><br>
    <button type="submit">Signup</button>
</form>

见这里：http://jsfiddle.net/4ntwrc7c/1/

在提交表单之前选中复选框？

1 个答案: