使用 Angular JS 提交表单时的复选框验证答案

【问题标题】：Checkbox validation on form submission using Angular JS使用 Angular JS 提交表单时的复选框验证
【发布时间】：2014-01-22 06:38:24
【问题描述】：

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

目前，如果未选中该复选框，则该复选框仅显示为红色，作为其必填字段。如何通过复选框检查和 ng-show div 绑定 ng-click 上的提交功能。

我的 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>

【问题讨论】：

你有没有尝试过？
是的，我尝试为包含错误消息的 div 赋予属性 ng-show="_ServerForm.termsagreement.$error.required"，但这又会导致错误消息一直出现且仅当我单击复选框时消失。但我的要求是消息应该只出现在点击提交按钮时。我不知道如何覆盖 REQUIRED 指令来控制提交按钮点击
你能把这个html放到你的问题上吗？
我已经用 HTML 更新了问题

标签： javascript jquery html angularjs checkbox

【解决方案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 不会显示。

我相信这回答了您的问题。

【讨论】：

【解决方案2】：

或者你可以使用form.$submitted 和input.$touched。这是一个使用引导程序的完整示例：

<form name="vm.form" class="form-horizontal" ng-submit="vm.register()">
    <div>some other controls</div>
    <div ng-class="{
                        'has-error': vm.form.acceptedTerms.$invalid && (vm.form.$submitted || vm.form.acceptedTerms.$touched),
                        'has-success': vm.form.acceptedTerms.$valid && vm.form.acceptedTerms.$touched
                    }">
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="acceptedTerms" ng-model="vm.acceptedTerms" required> I accept the ToC</a>
                    </label>
                </div>
                <div class="row" ng-show="vm.form.acceptedTerms.$error && (vm.form.$submitted || vm.form.acceptedTerms.$touched)">
                    <div class="col-sm-12">
                        <span class="help-block" ng-show="vm.form.acceptedTerms.$error.required">You need to accept ToC</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

【讨论】：

【解决方案3】：

从 Angular 2.3.0 开始有更好的解决方案：

不要将Validators.required 用于此类复选框验证。而是使用Validators.requiredTrue。

1. 初始化提交尝试变量，并在提交时更新：

export class agreementComponent
{   
    submissionAttempted: boolean;

    constructor() {
        // Initialize submission attempted state
        this.submissionAttempted = false;  
    };

    submitHandler() {
        // Update submission attempted state
        this.submissionAttempted = true;
        // ...
    }
}

2. 向用户传达错误：

<form (ngSubmit)="submitHandler()">
    <div>
        <mat-checkbox formControlName="licence">
            I accept the License Agreement
        </mat-checkbox>

        <mat-error *ngIf="formName.get('licence').hasError('requiredTrue') && 
                          submissionAttempted">
            Please agree to the Licence Agreement
        </mat-error>
    </div>
</form>

3.此外，不允许提交无效的表单。

（请参阅 GitHub 问题 #11459。请参阅 requiredTrue 上的 Angular 文档。）

【讨论】：