我在Angular v7中使用 ReactiveForms
.
Template
<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>
Component
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,但是我无法看到这有什么问题,因为autocomplete为我提供了我期望的值 .
2 回答
您可以简单地引用字段,而不是您正在使用的便捷方法
如果您愿意使用,则会出现显示错误消息的情况
我不清楚你现在的方法给你带来了什么好处,比如这个直截了当 .
通过在html中检查
loginForm
应该很容易修复 .