在 formControlName 属性中接收 "Cannot read property 'value' of undefined"

Question

我正在使用 Angular 7 和 Google Material 设计，并且我遵循了 Reactive 表单教程：https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance.

我用了 formGroup 和 formControlName。这是我的 login.component.ts 文件：

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

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

  constructor() { }

  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  ngOnInit() {
  }

  onSubmit() : void {
    console.log(this.loginForm.value);
  }
}

这是我的login.component.html:

<mat-card class="login-card">
    <mat-card-header>
        <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <form [formGroup]="loginForm" class="login-form" (ngSubmit)="onSubmit()">
            <table class="login-full-width" cellspacing="0">
                <tr>
                    <td>
                        <mat-form-field class="login-full-width">
                            <input matInput type="text" formControlName="email" placeholder="Email" required>
                        </mat-form-field>
                    </td>
                </tr>
                <p>
                    Value: {{email.value}}
                </p>
                <tr>
                    <td>
                        <mat-form-field class="login-full-width">
                            <input matInput formControlName="password" placeholder="Password" type="password" required>
                        </mat-form-field>
                    </td>
                </tr>
            </table>
        </form>
        <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
    </mat-card-content>
    <mat-card-actions>
        <button mat-raised-button [disabled]="!loginForm.valid" color="primary">Login</button>
    </mat-card-actions>
</mat-card>

这是我在导航到登录页面时遇到的错误：

LoginComponent.html:11 ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as updateRenderer] (LoginComponent.html:15)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937)
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)
at checkAndUpdateView (core.js:23313)
at callViewAction (core.js:23548)
at execEmbeddedViewsAction (core.js:23511)
at checkAndUpdateView (core.js:23308)
at callViewAction (core.js:23548)

这是 login.component.html 的第 11 行：

<input matInput type="text" formControlName="email" placeholder="Email" required>

我是按照教程一步一步来的，非常简单易学。我是否遗漏了导致错误的内容？

Answer 1

您的 class 中没有电子邮件属性。您必须通过表单组访问表单值，如下所示：

<p>
 Value: {{loginForm.get('email').value}}
</p>

Answer 2

您正在尝试访问您尚未在 LoginComponent 中定义的变量 class。如果您只想映射输入值以进行调试，则可以使用模板变量。您只需在输入标签中添加一个，如下所示：#email

Check this official Angular documentation

Answer 3

更好的方法是：

 <input  type="text"  [formControl]="loginForm.controls.email" placeholder="Email" required>

在 formControlName 属性中接收 "Cannot read property 'value' of undefined"

Receiving "Cannot read property 'value' of undefined" in formControlName property

angular

angular-reactive-forms

在 formControlName 属性 中接收 "Cannot read property 'value' of undefined"

Receiving "Cannot read property 'value' of undefined" in formControlName property

angular

angular-reactive-forms

在 formControlName 属性中接收 "Cannot read property 'value' of undefined"