Set checkbox validation if checkbox unchecked

Question

In my Angular 6 application's register form, I have a checkbox which is already checked. I need to check whether the user has unchecked the checkbox and if it is so I want to display an error message.

This is my checkbox in .html file,

 <div class="form-group">
       <div class="round">
            <input
                  type="checkbox"
                  id="checkbox33"
                  formControlName="agree">
             <label for="checkbox33"></label>
        </div>
        <small class="text-muted">Agree to our <a href="#" class="link">Terms
                  Of Use</a> and <a href="#" class="link">Privacy Policy</a>.
                </small>
        <span *ngIf="!worldWideRegisterForm.get('agree').valid" class="text-danger">You should agree!</span>

  </div>

This is my ngOnInit() in .ts file

ngOnInit() {
    this.worldWideRegisterForm = new FormGroup({
      'userName': new FormGroup({
        firstName: new FormControl(null, Validators.required),
        lastName: new FormControl(null, Validators.required)
      }),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'phone': new FormControl(null, Validators.required),
      'address': new FormGroup({
        line1: new FormControl(null, Validators.required),
        line2: new FormControl(null),
      }),
      'area': new FormGroup({
        'province': new FormControl(null, Validators.required),
        'city': new FormControl(null, Validators.required),
        'postalCode': new FormControl(null, Validators.required),
      }),
      'password': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'agree': new FormControl(true, Validators.required)
    });
  }

If the user can't uncheck the box, why don't you just disable it ? — user4676340
– user4676340, Commented Mar 28, 2019 at 10:02
Thank you @trichetriche, you are correct. But according to the requirement, I couldn't disable it. — Denuka
– Denuka, Commented Mar 28, 2019 at 11:25

Sheik Althaf · Accepted Answer · 2019-03-28 10:08:25Z

8

use the angular validator requiredTrue

'agree': new FormControl(true, Validators.requiredTrue)

For error

<div *ngIf="myTrue.hasError('required')">
   Agree the T&C    
</div>

official link https://angular.io/api/forms/Validators#requiredTrue

edited Mar 28, 2019 at 10:08

answered Mar 28, 2019 at 10:03

Sheik Althaf

1,61511 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Denuka Over a year ago

Thank you so much @Sheik, it seems there are lot of ways to solve my problem. And thank you for sharing the documentation reference as well.

riorudo · Accepted Answer · 2019-03-28 10:05:54Z

1

Instead of 'agree': new FormControl(true, Validators.required) try it with 'agree': new FormControl(true, Validators.pattern('true')).

answered Mar 28, 2019 at 10:05

riorudo

1,25711 silver badges20 bronze badges

1 Comment

Denuka Over a year ago

Thank you @riorudo, I could be able to do the exact same thing by writing custom validation for that. But this is much easier. I hope to add my answer also here. Thank you again.

Denuka · Accepted Answer · 2019-03-28 11:16:19Z

I could solve my problem by writing custom validation for checkbox and got the exact output as other answers. I like to share my answer as well.

This is my .html of checkbox,

<div class="form-group">
        <div class="round">
             <input
                  type="checkbox"
                  id="checkbox33"
                  formControlName="agree">
             <label for="checkbox33"></label>
         </div>
         <small class="text-muted">Agree to our <a href="#" class="link">Terms
                Of Use</a> and <a href="#" class="link">Privacy Policy</a>.
              </small>
         <span *ngIf="!worldWideRegisterForm.get('agree').valid" class="text-danger">
           <span *ngIf="worldWideRegisterForm.get('agree').errors['checkBoxIsForbidden']">Agree to our terms & conditions.</span>
              </span>
  </div>

This is what I added to my .ts file

'agree': new FormControl(true, [Validators.required, this.forbiddenCheckBox])

//fuction to check the checkbox
 forbiddenCheckBox(control: FormControl): { [s: string]: boolean } {
    if (control.value === false) {
      return {'checkBoxIsForbidden': true};
    }
  }

Elhem Nouri · Accepted Answer · 2022-07-27 13:16:23Z

0

You can use FromBuilder:

TS:

exampleForm: FormGroup; 
Constructor(private formBuilder:FromBuilder)
{
 this.exampleForm = this.formBuilder.group({  
  password:['',Validators.requiredTrue],  
  agree:['',Validators.requiredTrue] }) 
 }

HTML:

<section [formGroup]="exampleForm">
<p>
<mat-checkbox formControlName="password">
</mat-checkbox>
</p>  
<p><mat-checkbox formControlName="agree">
</mat-checkbox>
</p> 
</section>
<button [disabled]="validForm.invalid">Valid
</button>

edited Jul 27, 2022 at 13:16

answered Jul 27, 2022 at 9:44

Elhem Nouri

911 silver badge4 bronze badges

Collectives™ on Stack Overflow

Set checkbox validation if checkbox unchecked

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related