I am currently facing an issue with the code below:
Html:
<form fxLayout="column" fxLayoutAlign="center center"
[formGroup]="deleteForm" (ngSubmit)="onSubmitForm()">
<mat-form-field color="accent" appearance="outline">
<input
type="password"
matInput
required
placeholder="Re-enter your password"
formControlName="password">
<mat-error>Please re-enter your password.</mat-error>
</mat-form-field></button>
<mat-spinner *ngIf="isLoading$ | async"></mat-spinner>
<button *ngIf="!(isLoading$ | async)" type="submit" mat-flat-button
color="accent" [disabled]="deleteForm.invalid">Remove</button>
</form>
ts file:
this.deleteForm = new FormGroup({
password: new FormControl('', {
validators: [Validators.required]
})
});
I recently encountered a problem where the background color of my mat-form-field matches the background color of the page. When I had a white background, the form fields were not visible because they blended in. To address this, I changed the background color to a darker shade, making the fields visible but causing the text to blend in as it remained white. Refer to the image linked below for a visual representation.
https://i.sstatic.net/q67HG.jpg
I am unsure about what might be causing this issue.