Checkbox validation on form submission using Angular JS

Question

I am new to Angular JS. I have created a form which is having a terms & agreement checkbox at the bottom. My requirement is when the user clicks the submit button without checking the checkbox, a div containing the error message should be displayed.

Currently the checkbox if not selected just appears RED as its a required field. How can i bind the submit functionality on ng-click with the checkbox check and ng-show a div.

My HTML looks like this -

    <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

A possible solution to this is:-

1.) In the function

submitform()

you should set some random variable name to true. Say

$scope.buttonClicked=true;

2.) In the HTML code,

Change

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

to

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

The buttonClicked variable will be set in the scope only after the button is clicked and the function is called. And your message's ng-show will not display until buttonClicked is set.

I believe this answers your question.

Answer 2

Since Angular 2.3.0 there is a better solution:

Don't use Validators.required for this type of checkbox validation. Instead use Validators.requiredTrue.

1. Initialize a submission attempted variable, and update on submit:

export class agreementComponent
{   
    submissionAttempted: boolean;

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

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

2. Communicate error to user:

<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. Additionally, disallow invalid form submissions.

(See GitHub issue #11459. See Angular docs on requiredTrue.)

Answer 3

Or you can can use form.$submitted and input.$touched. Here's a complete example using 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>