时间戳

首页 > 解决方案 > Angular 8 - 表单组值始终为空

angular8 - Angular 8 - 表单组值始终为空

问题描述

我是 Angular 新手，我从一个简单的登录表单开始。然而，表单值总是显示为空 - 即使在表单提交之前已经输入了值。

我创建了一个登录组件，该组件被导入到 app 模块中。页面出现，但提交不携带任何值。我已经删除了所有用于调试的 Angular 验证检查，但在我的 onsubmit 函数中收到的值仍然是空的。

我已经粘贴了组件代码。下面。

login.component.html

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">  
<div class="form-group" >
<div class="form-group">
  <input type="email" class="form-control" formcontrolname="username" 
    placeholder="Email Id" required autofocus/><br/>
</div>

<div class="form-group">
  <input type="password" class="form-control" formcontrolname="password" placeholder="Password" required/><br/>
</div>

<div class="form-group">
  <button>Login</button>
  <a href="/public/register" class="btn" >Register</a>
</div>


应用程序组件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
     imports:      [ BrowserModule, AppRoutingModule, FormsModule, 
       ReactiveFormsModule ],
     declarations: [ AppComponent, HelloComponent, LoginComponent ],
     bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

登录组件.ts

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


 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
   loginForm: FormGroup;
   submitted = false;
   returnUrl = '';

   constructor(
     private formBuilder: FormBuilder,
     private router: Router
   ) {

   }

  ngOnInit() {
     this.loginForm = this.formBuilder.group ({
        username: ['', Validators.required],
        password: ['', Validators.required]
    });
  }
 get user() { return this.loginForm.controls; }

 onSubmit() {
 // stop if form is invalid
 /*  if (this.loginForm.invalid) {
   console.log("Returning");
   return;
  } */
  this.submitted = true;

  console.log('login values:');
  console.log(this.user.username.value, this.user.password.value);

  this.returnUrl='/home';
  // this.router.navigate([this.returnUrl]);
 }
}

标签： angular8

解决方案

你可以试试这个：

get user() { return this.loginForm.value; }

推荐阅读