I have a registration and login page that should look like this when loading.

But when the page loads, first looks like this and after a page refresh(f5) updates the elements and then looks correct.

Does anyone know maybe what could be the reason?

register.component.html (Username and Email Texbox)

  <mat-form-field appearance="outline">
    <mat-label>Benutzername</mat-label>
    <input
      matInput
      type="text"
      formControlName="name"
      [ngClass]="{ 'is-invalid': f['name'].errors }" autocomplete="off">

    <mat-icon matSuffix>person</mat-icon>

    <mat-error *ngIf=" f['name'].errors" >
        
      <mat-error *ngIf="f['name'].errors['required']">Benutzername ist erforderlich</mat-error>
      <mat-error *ngIf="f['name'].errors['minlength']">
        Der Benutzername muss mindestens 8 Zeichen lang sein.

      </mat-error>

      <mat-error *ngIf="f['name'].errors['maxlength']">
        Der Benutzername darf nicht länger als 20 Zeichen sein.
      </mat-error>
    </mat-error>
  </mat-form-field>



<mat-form-field appearance="outline">
  <mat-label>Email</mat-label>
  <input
    matInput
    type="email"
    formControlName="email"
    [ngClass]="{ 'is-invalid':  f['email'].errors }" autocomplete="off">

  <mat-icon matSuffix>email</mat-icon>

  <mat-error *ngIf=" f['email'].errors" >
    <mat-error *ngIf="f['email'].errors['required']">E-Mail ist erforderlich</mat-error>
    <mat-error *ngIf="f['email'].errors.serverErrorEmail">
        {{serverErrorEmailMessage}}
      </mat-error>

    <mat-error *ngIf="f['email'].errors['email']">E-Mail ist ungültig</mat-error>
  </mat-error>
</mat-form-field>

register.component.css

.box {
  padding: 2em;
  border: 3px solid #00ADB5;
  border-radius: 20px;
  width: 450px;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  background: transparent;
  display: block;
}

.mat-card-header{
  display: flex;
  justify-content: center;
  color: #00ADB5;
  text-align: center;
  width: 100%;
  font-weight: 700;
  padding: 20px 0;
}

form{
  border-radius: 20px;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  color: #00ADB5;
}
    
.mat-form-field{
  width: 100%;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0.5em 0;
}

.mat-stroked-button{
  border-color: #00ADB5;
}

::ng-deep .mat-form-field-label{
  color: #a6a6a6 !important;
}

::ng-deep .mat-form-field-subscript-wrapper{
  font-size: 100%;
  margin-top: 0.4em;
  top: calc(100% - 1.79em);
}

profile.component.ts

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
    id:number = 0;
    user: any;
    isLoaded:boolean = true;
  constructor(private http: HttpClient,private router: Router, private cookieService:CookieService, private route: ActivatedRoute, private serverData: ServerData) { }
  ngOnInit(): void 
    {

        this.user = this.serverData.UserToLoadInProfile;
        if(this.user == undefined) 
        {
            this.isLoaded = false;
            
            const routeParams = this.route.snapshot.paramMap;
            const userIdFromRoute = Number(routeParams.get('userID'));
            if(userIdFromRoute ==   Number(this.cookieService.get('userID')))
            {
                this.http.get<any>('/backend/api/user',{observe: 'response',withCredentials: true, headers: new HttpHeaders({'Content-Type':  'application/json',})}).subscribe(response2 =>
                    {
                        console.log('here!')
                        if(response2.status == 200)
                        {
                            this.user = response2.body;
                            this.isLoaded = true;
                            
                        }
                        },
                        error =>
                        {
                
                        }
                        );
            }
            else
            {
                this.http.get<any>('/backend/api/user/'   userIdFromRoute,{observe: 'response',withCredentials: true, headers: new HttpHeaders({'Content-Type':  'application/json',})}).subscribe(response2 =>
                    {

                        if(response2.status == 200)
                        {
                
                            
                            
                        }
                        },
                        error =>
                        {
                
                        }
                        );

            }
            
        }
    }

CodePudding user response：

Can you try adding 'border: none' to mat-form-field ? Also, check this 'is-invalid' ngClass that you have in the inputs. What does it do ?

CodePudding user response：

There war a CSS code in other Page, that should I to disable.

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color:#00ADB5!important;
}