时间戳

首页 > 解决方案 > 表单反应返回空

angular - 表单反应返回空

问题描述

早上好，我正在尝试在Angular 10中创建一个反应式表单，但是当我向表单请求数据时，它返回一个空结果

如果我进行正确的导入并且我以正确的方式使用属性，我不明白为什么表单不返回值，请帮助我

这是代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

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

  formLogin: FormGroup;

  constructor(
    private readonly router: Router,
    private _builder: FormBuilder
  ) {
    this.formLogin = this._builder.group({
      user: ["", Validators.compose([Validators.email, Validators.required, Validators.maxLength(50)])],
      passwd: ["", Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(50)])]
    });
  }

  ngOnInit(): void {
  }

   onSubmitData() {
    console.log(this.formLogin.value);
  }



  /**
   * Este método no se puede modificar
   * */
  public redirectUsers(): void {
    this.router.navigateByUrl('/users/list');
  }

}

这是 HTML 代码：

<div class="my-container">
  <form class="formLogin" [formGroup]="formLogin" (ngSubmit) ="onSubmitData()">

    <h3 class="titleLogin">Inicio de sesión</h3>
    <hr>
    <div class="form-group">
      <label for="login__email">Correo electrónico</label>
      <input formControlName="user" type="email" name="login__email" id="login__email">
    </div>
    <!-- <div *ngif="formLogin.get('email').hasError('email') && formLogin.get('email').touched">
      <span id="login__email-error">Error email</span>
    </div> -->
    <div class="form-group">
      <label for="login__password">Contraseña</label>
      <input formControlName="passwd" type="password" name="login__password" id="login__password">
    </div>

    <button class="btn-login" id="login__btn-login" [disabled]="formLogin.invalid">Iniciar sesión</button>
    <h1>{{formLogin.valid}}</h1>
  </form>
</div>

这是登录模块代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginRoutingModule } from './login-routing.module';


@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        LoginRoutingModule
    ]
})
export class LoginModule { }

我的表格的回报是：

{user: "", passwd: ""}

标签： angularformsreactiveangular10

解决方案

谢谢，我解决了声明我的组件并在我的组件模块中导入 formsModule 和 reactiveFormsModule 的问题，我也发现我也不能使用 ngIf 或 ngFor，这就是解决我的问题的方法。

推荐阅读