My goal is to validate each form value with its own criteria and display an alert for each validation failure. While I am able to achieve this, the error messages are currently being shown on the same line, but I want them to be displayed on separate lines.
https://i.sstatic.net/TRJCp.png
In my console, I can see the correct answer for each error displayed on a different line.
I go through each validation criteria, collecting errors in an array. If the array is not empty, indicating we have errors, the error array is returned. Otherwise, the details are submitted to the backend API.
if(errors.length != 0){
console.log("Not an empty array");
console.log(errors.join('\r\n'));
this.errorMsg = errors.join('\r\n');
}else{
this.service.createData(formData).subscribe((res) => {
console.log(res);
this.userForm.reset();
this.successMsg = res.message;
});
}
.html
<div *ngIf="errorMsg" class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>{{errorMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>