Whenever the checkbox is checked, the events are not triggering. Check out this stackblitz demo code for reference. I am looking to make the checkbox trigger events without the need to physically click on it. Therefore, I am using a button to simulate the event.
HTML
<div class="card m-3">
<div class="card-body">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-row">
<div class="form-group col-5">
<label>First Name</label>
<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
<div *ngIf="f.firstName.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group col-5">
<label>Last Name</label>
<input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
<div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
<div *ngIf="f.lastName.errors.required">Last Name is required</div>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" [(ngModel)]="test" (focus)="eventCheck(registerForm.valid,$event)"
[ngModelOptions]="{standalone: true}"/>
<label for="acceptTerms" class="form-check-label">Accept</label>
<div *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">Accept Ts & Cs is required</div>
</div>
</form>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary mr-1" (click)="focusCheckbox()">Tick Checkbox</button>
</div>
ts
focusCheckbox() {
this.test = true;
}
eventCheck(v: boolean ,event){
console.log(event.target.checked);
console.log(v);
}