角度 7 响应式形式 无法读取未定义的属性'controls'

Question

我在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)

我不知道为什么会发生这种情况，围绕提交按钮的验证似乎正在工作，所以我只能假设字段被正确引用。我怀疑问题来自组件中的便利获取器集，但我看不出这有什么问题，因为自动完成为我提供了我期望的值。

Answer 1

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

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

如果你希望使用，那么这将是一个显示错误消息的情况

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

我不清楚你目前的方法能给你带来什么好处，而不是像这样直截了当的事情。

Answer 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>