Question

我正在使用Angular 7和Google Material Design，并且按照本教程中的反应性表单进行操作：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错误TypeError：无法读取未定义的属性“值”
      在Object.eval [作为updateRenderer]（LoginComponent.html：15）
      在Object.debugUpdateRenderer [作为updateRenderer]（core.js：23937）
      在checkAndUpdateView（core.js：23312）
      在callViewAction（core.js：23548）
      在execComponentViewsAction（core.js：23490）
      在checkAndUpdateView（core.js：23313）
      在callViewAction（core.js：23548）
      在execEmbeddedViewsAction（core.js：23511）
      在checkAndUpdateView（core.js：23308）
      在callViewAction（core.js：23548）

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

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

我一步一步地遵循了本教程，并且遵循起来非常简单。我是否在这里错过了导致错误的内容？

Answer 1

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

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

Answer 2

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

Check this official Angular documentation

Answer 3

更好的方法是：

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

在formControlName属性中接收“无法读取未定义的属性'value'”

3 个答案: