When I add the "formControlName" field in my angular code, the entire element disappears

Question

I've seen similar questions but they're about the content and not the entire element. My code is the following:

<mat-form-field class="box-field"
[ngStyle]="{'background': 'url(assets/img/user.png) no-repeat padding-box'}">
<mat-label>Username</mat-label>
 <input matInput name="username" formControlName="username" autocomplete="off">
<mat-icon class="icon-display"></mat-icon>
 </mat-form-field>

The ts file is the following:

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { AuthenticationService } from '../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  submitted = false;
  loginForm: FormGroup;

  
  constructor(
        private route: ActivatedRoute,
        private router: Router,
        private _loginFormBuilder: FormBuilder,
        private authenticationService: AuthenticationService) { }

  ngOnInit(): void {
  }

  onSubmit(){
    this.submitted = true;
    console.log();
        // reset alerts on submit
        //this.alertService.clear();

        //this.loading = true;
        this.authenticationService.login(this.loginForm.get('username').value, this.loginForm.get('password').value)
            .pipe(first())
            .subscribe(
                data => {
            console.log(data)}
            );
  }

}

Without the "formControlName" field the page loads like this: og-image

When I add the field, it loads like this: broken-image

And only when I click on it, it appears again like this: on-click-image

Anyone knows why this happens?

Thanks in advance!

Answer 1

So after I added the following snippet in my constructor it worked:

      this.loginForm = this._loginFormBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
      })

Still not sure what exactly happened before.