Angular登录表单提交返回[[prototype]]而非实际值问题

问题出在你的输入框缺少name属性——Angular模板驱动表单依赖name属性来标识每个表单控件，没有这个属性，ngModel无法将输入值绑定到表单对象中，导致login.value无法正确收集输入内容，只能输出原型对象。

修改后的HTML代码 #

给每个使用ngModel的输入框添加唯一的name属性，同时建议将密码输入框的type改为password（优化体验）：

<img src="./assets/Logo100Legal.png" alt="Logo" class="logoHome">
<form #login="ngForm" (ngSubmit)="submit(login)">
    <div class="input-group-lg inputStyle form-group" >
        <h5>Nombre de usuario o correo electronico</h5>
        <input type="text" name="username" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" ngModel>
    </div>
    
    <div class="input-group-lg inputStyle form-group">
        <h5>Contraseña</h5>
        <input type="password" name="password" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" ngModel>
    </div>
    
    <input type="submit" class="btn btn-lg myButton" value="Iniciar Sesion">
</form>
<br>
<br>

优化后的TS代码 #

可以给表单参数指定NgForm类型，提升类型安全性（需要先导入NgForm）：

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

export class LogInComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  
  }

  submit(login: NgForm){
    console.log(login.value )
  }
 
}

修改完成后，点击提交按钮就能在控制台看到包含username和password的输入值对象了。

内容的提问来源于stack exchange，提问作者k1k4ss0