I am encountering an issue with a registration form that includes a checkbox for terms of service. The 'Register' button on the form is supposed to become enabled when the form is valid, and disabled when it is not. However, I noticed that even if I fill out the form correctly and check the checkbox, the register button stays enabled. This means that the form remains in a valid state even when I uncheck the checkbox.
Just as a side note, I tried adding some statements to the input fields but unfortunately, it did not solve the problem.
Below you can find my form along with a snippet of the .ts code. Some parts of the code have been omitted for brevity.
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit, AfterViewInit {
// Some variables are removed here
registerForm: FormGroup;
bsConfig: Partial<BsDatepickerConfig>;
terms = false;
constructor(private authService: AuthService, private router: Router,
private alertService: AlertService, private fb: FormBuilder, private zone: NgZone) {}
ngOnInit() {
this.bsConfig = {
containerClass: 'theme-red'
};
this.createRegisterForm();
}
createRegisterForm() {
this.registerForm = this.fb.group({
terms: ['', Validators.required],
});
}<form [formGroup]="registerForm" (ngSubmit)="register()">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="gridCheck"
[ngClass]="{'is-invalid': registerForm.get('terms').errors && registerForm.get('terms').touched}"
name="terms"
type="checkbox"
formControlName="terms">
<label class="form-check-label" for="gridCheck">Agree to terms</label>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-yb w-100" [disabled]="!registerForm.valid" type="submit">
<span *ngIf="loadingRegister" class="spinner-border spinner-border-sm color-yb-white" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span *ngIf="!loadingRegister">Register</span>
</button>
</div>
</form>