Angular 5 cannot read property 'remove' of undefined

Question

So, I've been working my way into ASP.NET Core 2 and Angular 5 (I'm a Django/Rails Vue guy) and after doing some trivial examples I've decided to build one of my old products with the new stack. Thing is I'm having trouble figuring out the source of this error.

Here is my login component template:

<div class="login-container">
  <h2 class="login-title">{{title}}</h2>
  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal">
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Username')}">
      <input type="text" formControlName="Username" class="form-control" required placeholder="Usuario o Email" />
    </div>
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Password')}">
      <input type="password" formControlName="Password" class="form-control" required placeholder="*****" />
    </div>
    <button type="submit" [disabled]="form.invalid" class="btn btn-md btn-success">Entrar</button>
  </form>
</div>

and here's the Typescript:

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


  title: string;
  form: FormGroup;

  constructor(private router: Router,
    private fb: FormBuilder,
    private authService: AuthService,
    @Inject('BASE_URL') private baseUrl: string) {
    this.title = 'Entrar';
  }

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      Username: ['', Validators.required],
      Password: ['', Validators.required]
    });
    console.log(this.form);
  }
  onBack() {
    this.router.navigate(['home']);
  }
  getFormControl(name: string) {
    return this.form.get(name);
  }
  isValid(name: string) {
    const e = this.getFormControl(name);
    return e && e.valid;
  }
  isChanged(name: string) {
    const e = this.getFormControl(name);
    return e && (e.dirty || e.touched);
  }

  hasErrors(name) {
    return this.isChanged(name) && !this.isValid(name);
  }

  onSubmit() {
    const url = this.baseUrl + 'api/token/auth';
    const username = this.form.value.Username;
    const password = this.form.value.Password;
    this.authService.login(username, password)
      .subscribe(res => this.router.navigate(['home']),
        err => this.form.setErrors({ 'auth': 'Usuario o password incorrecto' }));
  }
}

I've read similar questions in SO but eventually decided to post this because:

1. As far as I can tell nothing in my template is undefined (I think the only binding here is the form)
2. I'm not calling/reading nothing with the name remove in it.

Thanks in advance.

Answer 1

I got the same error when accidentally adding [ngClass] to <ng-container />