I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red but the left side of the border disappears. Despite trying various solutions, I am unable to find the right approach to fix this.
When the border has no color, it should be solid all around like this: https://i.stack.imgur.com/JO2zy.png
If an error occurs and 'Bedrijfsnaam' is not filled in, the border looks like this: https://i.stack.imgur.com/RZDha.png
As you can see, the left side gets cut off... I want the border to continue seamlessly
Here is the HTML code snippet:
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@Component({
selector: 'subscription-form',
standalone: true,
imports: [
MatFormFieldModule,
MatInputModule,
CommonModule,
FormsModule,
],
styleUrls: ['./subscription-form.component.scss'],
templateUrl: './subscription-form.component.html',
})
export default class SubscriptionFormComponent {
}.subscriptionForm {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: start;
}<form class="subscriptionForm" #form="ngForm"">
<div class="textFields">
<mat-form-field appearance="outline">
<mat-label>Naam</mat-label>
<input matInput type="text" name="name" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Bedrijfsnaam</mat-label>
<input matInput type="text" name="companyName" required />
</form>
</mat-form-field>