Angular 7 Reactive Forms无法读取未定义的属性“控件”答案

【问题标题】：Angular 7 Reactive Forms Cannot read property 'controls' of undefinedAngular 7 Reactive Forms无法读取未定义的属性“控件”
【发布时间】：2018-11-17 09:41:12
【问题描述】：

我在 Angular v7 中使用 ReactiveForms。

模板

<div class="login__container">
    <div class="login__form">
        <form novalidate [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <div class="field">
                <p class="control">
                    <input class="input" type="text" placeholder="Username" formControlName="username" [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
                </p>
            </div>
            <div class="field">
                <p class="control">
                    <input class="input" type="password" placeholder="Password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
                </p>
            </div>
            <div class="field">
                <p class="control">
                    <button class="button is-success" [disabled]="!loginForm.valid">
                        Login
                    </button>
                </p>
            </div>
        </form>
    </div>
</div>

组件

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

@Component({
    selector: 'app-login-component',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup
    submitted = false

    constructor(private fB: FormBuilder) {}

    ngOnInit() {
        this.loginForm = this.fB.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        })
    }

    // convenience getter for easy access to form fields
    get f() {
        return this.loginForm.controls
    }

    onSubmit() {
        this.submitted = true

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return
        }

        console.log(this.loginForm.value)
    }
}

当我去这条路线时，我有一个控制台错误

ERROR TypeError: Cannot read property 'controls' of undefined
    at Object.get [as f] (http://localhost:4200/main.js:257:35)
    at http://localhost:4200/vendor.js:92667:9
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:92664:33)
    at http://localhost:4200/vendor.js:92670:7
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:92664:33)
    at http://localhost:4200/vendor.js:92670:7
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:92664:33)

我无法弄清楚为什么会发生这种情况，围绕提交按钮的验证似乎正在工作，所以我只能假设这些字段被正确引用。我怀疑问题出在组件中设置的便利 getter 上，但是我看不出这有什么问题，因为自动完成为我提供了我期望的值。

【问题讨论】：

首先检查 'this.loginForm' 在 f 方法中是否未定义。否则你可以在 HTML 中使用 loginForm.controls.username.errors。
另一种选择是将formBuilder 从ngOnInit 循环传递到constructor 循环
事实上，我无法重现您的问题stackblitz.com/edit/angular-lpstaz
正如@OmerShukar 提到的，您可以尝试在constructor 中实例化表单
使用构造函数没有帮助，它似乎也没有遵循 Angular 设置的文档。

标签： angular angular-reactive-forms angular7

【解决方案1】：

您可以简单地引用字段，而不是您使用的便捷方法

[ngClass]="{ 'is-invalid': submitted && loginForm.controls['username'].errors }"

如果您愿意，则会显示错误消息

<div *ngIf="submitted && loginForm.controls['username'].hasError('required')" class="error-message">Username is required</div>

我不清楚你目前的方法比这种直接的方法能给你带来什么好处。

【讨论】：

这不会有什么不同

【解决方案2】：

通过检查 html 中的 loginForm 应该很容易修复。

<div class="login__container" *ngIf="loginForm"> <!-- Check here -->
    <div class="login__form">
        <form novalidate [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <div class="field">
                <p class="control">
                    <input class="input" type="text" placeholder="Username" formControlName="username" [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
                </p>
            </div>
            <div class="field">
                <p class="control">
                    <input class="input" type="password" placeholder="Password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
                </p>
            </div>
            <div class="field">
                <p class="control">
                    <button class="button is-success" [disabled]="!loginForm.valid">
                        Login
                    </button>
                </p>
            </div>
        </form>
    </div>
</div>

【讨论】：