Angular@13 formGroup 值为空（反应形式）答案

【问题标题】：Angular@13 formGroup values are null (reactive forms)Angular@13 formGroup 值为空（反应形式）
【发布时间】：2022-01-20 09:18:25
【问题描述】：

一直在尝试访问表单实例值，但它们都是空的。它在模板驱动的表单中运行良好。我已经导入了 ReactiveFormsModule。我玩过attr，但找不到丢失的东西？表单在我使用 Validators.required 时无效，这意味着它是空的

.component.html

<form [formGroup] ="tryForm" (ngSubmit)="onSubmit()" >
<div class="form-group">
<label>Name</label><br>
<input type="text" FormControlName ="name">
<span *ngIf="tryForm.invalid">Name required</span>
</div>
<!-- <div *ngIf="name.invalid" class="alert alert-danger"></div> -->
<div class="form-group">
    <label>Email</label><br>
    <input type="text" FormControlName ="email">
</div>
<div class="form-group">
    <label>Message</label><br>
    <input type="text" FormControlName ="message">
</div>
<button type = "submit" >Submit</button>
</form>

.component.ts

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

@Component({
  selector: 'app-log-in',
  templateUrl: './log-in.component.html',
  styleUrls: ['./log-in.component.css']
})
export class LogInComponent implements OnInit {
  tryForm = this.fb.group({
    name : [''],
    email:  [''],
    message: [''],

  });

  constructor(private fb:FormBuilder,
      private router: Router) { }

  onSubmit(){
    if (this.tryForm.status == "VALID"){
      alert("Form Submitted Successfully.")
      alert(this.tryForm.get("name")?.value);
      this.tryForm.reset();

【问题讨论】：

我认为您必须在模板中将“FormControlName”更改为“formControlName”。
我已经做了什么都没有发生......即使括号上
看例子：stackblitz.com/edit/angular-ivy-sjfpej?file=src/app/…

标签： html angular typescript angular-reactive-forms

【解决方案1】：

首先您需要将html FormControlName 更改为formControlName。你可以阅读完整的解释here。

HTML

<form [formGroup]="tryForm" (ngSubmit)="onSubmit(tryForm.value)">
  <div class="form-group">
    <label>Name</label><br />
    <input type="text" formControlName="name" />
    <span *ngIf="tryForm.invalid">Name required</span>
  </div>
  <div class="form-group">
    <label>Email</label><br />
    <input type="text" formControlName="email" />
  </div>
  <div class="form-group">
    <label>Message</label><br />
    <input type="text" formControlName="message" />
  </div>
  <button type="submit">Submit</button>
</form>

然后像下面这样改变你的 ts，确保你在 ngOnInit 上初始化表单。

export class LogInComponent implements OnInit {

  tryForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.tryForm = this.fb.group({
      name   : [''],
      email  : [''],
      message: [''],
    });
  }

  onSubmit(data) {
    console.log(data);
  }
}

我复制了你的代码here

【讨论】：

【解决方案2】：

把这个<input type="text" FormControlName ="email"> 改成这个；

<input type="text" formControlName="email">

并在 ngOnInit 上构建您的表单，

ngOnInit(){
this.tryForm = this.fb.group({
    name : [''],
    email:  [''],
    message: [''],

  });
}

【讨论】：