提交 Angular 表单返回不可用或未定义

Question

我在 Angular 中编写了一个注册页面组件。我遵循了很少的教程，并且偶然发现了一个非常令人沮丧的错误。在尝试访问 NgForm 的值时，按下表单上的提交按钮只会导致控制台打印出“未定义”。访问 NgForm 的“有效”字段将返回 true 或 false，正如预期的那样。

页面：

<app-players></app-players>
<div class="container" style="text-align:center">
<h3>Register a new account!</h3>
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
        <label>Username:</label> <input type="text" id="username"
            required #username="ngModel"
            name="username" ngModel><br>
        <label>Password:</label> <input type="password" id="password"
            required #password="ngModel"
            name="password" ngModel><br>
        <label>Email:</label> <input type="text" id="email"
            required #email="ngModel"
            name="email" ngModel><br>
        <button type="submit" class="btn btn-success" [disabled]="!newPlayerEntry.form.valid">Submit</button>
    </form>
</div>
<div id = "result">

</div>

组件：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NewPlayer } from './new-player';

@Component({
  selector: 'app-players-register',
  templateUrl: './players-register.component.html',
  styleUrls: ['./players-register.component.css']
})
export class PlayersRegisterComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {
  }

  onSubmit(f: NgForm) { 
    console.log(f.value);
  }

}

Answer 1

您需要删除[disabled]="!newPlayerEntry.form.valid" 并更改为[disabled]="!f.valid"

这是工作版本

https://stackblitz.com/edit/angular-mgmmsq?file=src%2Fapp%2Fapp.component.html