Question

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

目前，如果未选中复选框，则只显示RED作为必填字段。如何使用复选框检查和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>

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将不会显示。

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

Answer 2

或者你可以使用表单。$ submit和input。$ touch。这是使用bootstrap的完整示例：

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

Answer 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文档。）

使用Angular JS在表单提交上进行复选框验证

3 个答案: