CODEWITHSUNDEEP
angulartypescriptangular5
yorodm
yorodm

Reputation: 4461

Angular 5 cannot read property 'remove' of undefined

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.

Upvotes: 8

Views: 9280

Answers (2)

nick
nick

Reputation: 3711

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

Upvotes: 21

yorodm
yorodm

Reputation: 4461

Found the answer after going through the template code:

Instead of *ngClass it should've been [ngClass] since * is a shorthand for structural directives. Writing *ngClass makes some wrong calls to the DOM and that's why I ended up with the error.

Upvotes: 16

Related Questions