提问人：Freddx L. 提问时间：3/20/2021 更新时间：3/20/2021 访问量：2077
为什么表单验证错误没有显示在 Angular 中？
Why form validation errors are not showing in Angular?
问：
我已经在一个项目中工作了一周，最近我注意到我没有收到任何表单验证错误，我不知道为什么。
我尝试了这段代码，从 https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
<form>
<div>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
</div>
<div>
<label for="number">How many would you like?</label>
<input type="number" id="number" name="amount" value="1" min="1" max="10">
</div>
<div>
<button>Submit</button>
</div>
</form>
我用代码替换了我的整个代码，并且没有显示验证消息，然后我替换了正文并且它有效，我不知道我的项目中可能有什么问题。app.component.htmlindex.html
我还试图从项目中删除 boostrap 和我angular.json中的任何依赖项，但仍然没有显示。scriptsstylesassets
答：
0赞
Aman Gojariya
3/20/2021
#1
对于 2+ 以上的 angular 版本，您需要创建响应式表单。请参考以下代码
app.module.ts
您需要在 app.module.ts 中导入 ReactiveFormsModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [
CommonModule,
ReactiveFormsModule
]
})
export class AppModule {
}
现在，您可以在app.component.ts中使用响应式形式
app.component.ts
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.myForm = this.fb.group({
i_like: ['', Validators.required],
amount: ['', Validators.required]
});
}
onSubmit(): void{
}
}
现在，在您的 app.component.html 中，您需要创建表单
应用组件：.html
<form [formGroup]="myForm" (ngSumbit)="onSubmit()">
<div>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input type="text" id="choose" formControlName="i_like" required minl ength="6" maxlength="6">
<p *ngIf="myForm.get('i_like').hasError('required')">Please select this field.</p>
</div>
<div>
<label for="number">How many would you like?</label>
<input type="number" id="number" formControlName="amount" value="1" min="1" max="10">
<p *ngIf="myForm.get('amount').hasError('required')">Please select this field.</p>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
您还可以在反应式表单中设置多种类型的验证器。请参阅此链接以获取更多参考。
0赞
Yuqiu G.
3/20/2021
#2
验证在 Angular 中的工作方式与普通 JS 中的工作方式不同：
- 你可以用一种被动的方式来做：https://angular.io/guide/form-validation#validating-input-in-reactive-forms
- 或模板驱动方式：https://angular.io/guide/form-validation#validating-input-in-template-driven-forms
通常，响应式方式是首选，因为如果代码库变大，以后可以更轻松地将其重构为组件
评论