Angular@13 formGroup 值为空（响应式表单）

Question

一直在尝试访问表单实例值，但它们都是空的。它在模板驱动的表单中运行良好。我已经导入了 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();

Answer 1

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

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

并在 ngOnInit 上构建您的表单，

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

  });
}

Answer 2

首先您需要将 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 上初始化表单。

TS

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

Angular@13 formGroup 值为空（响应式表单）

Angular@13 formGroup values are null (reactive forms)

html

angular

typescript

angular-reactive-forms