Angular: ngModel is not being recognized

Asked

Viewed 250 times

0

I’m using ngModel to insert value into variable through input, but the same is not being recognized, if I do with isolated values it returns nothing, if I try with object it returns Undefined

Html template:

<form class="form-signin">    
   <div class="form-label-group"> 
     <h2>Login do Usuário</h2>         
   </div>  
   <div class="form-label-group">
     <input type="email" id="emailLogin" class="form-control" placeholder="Digite seu e-mail" [(ngModel)]="usuario"/>         
   </div>
   <div class="form-label-group">
     <input type="password" id="senhaLogin" class="form-control" placeholder="Digite sua senha" [(ngModel)]="senha"/> 
   </div>
   <div class="form-label-group"> 
     <button class="btn btn-lg btn-primary btn-block" type="submit" (click)="loginUsuario()" >Entrar</button>         
     </div>          
  </form>

Component.: 

import { Component, OnInit } from '@angular/core';

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

  public usuario = "";  
  public senha = "";


  constructor() {
     }

  ngOnInit() {
     }

  loginUsuario() : void{     
    alert(this.usuario + " - " + this.senha);
     }
}
javascript html angular front-end binding

  • Check that you are importing the formsModule in the module that you leave this component

  • @Eduardovargas It was an attribute in the input tag that was missing, in my case it was the name attribute. formsModule was already declared yes, in the main application component, and it was there that I declared my component.

1 answer

1

I managed to solve, the problem was an attribute of the tag input template, was missing the attribute name. So I made the following change only in the tag s input:

`<input type="email" name="email" id="emailLogin" class="form-control" placeholder="Digite seu e-mail" [(ngModel)]="usuario"/>

<input type="password" name="senha" id="senhaLogin" class="form-control" placeholder="Digite sua senha" [(ngModel)]="senha"/>

`

Browser other questions tagged javascript html angular front-end binding

You are not signed in. Login or sign up in order to post.