Currently, I have a form set up using the FormBuilder to create it. However, my main concern is ensuring that validation only occurs upon clicking the button.
Here is an excerpt of the HTML code:
<input id="user-name" name="userName" placeholder="Enter Username" formControlName="username" class="form-control" />
<label class="form-label" for="user-name">Username</label>
<div class="text-danger" *ngIf="loginForm.controls['username'].touched && loginForm.controls['username'].errors?.['required']">Please enter the username</div>
Below shows part of the .ts file code:
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.generateForm();
}
generateForm() {
this.loginForm = this.formBuilder.group({
username: [null, Validators.compose([Validators.required])],
password: [null, Validators.compose([Validators.required])],
});
}
Instead of triggering validations automatically, I want them to activate when the button is clicked, displaying any errors afterwards.
If you have any suggestions or solutions, please share as they would greatly assist me. Thank you.