为什么 Angular 中没有显示表单验证错误？答案

【问题标题】：Why form validation errors are not showing in Angular?为什么 Angular 中没有显示表单验证错误？
【发布时间】：2021-03-20 01:07:08
【问题描述】：

我已经在一个项目中工作了一周，最近我注意到我没有收到任何表单验证错误，我不知道为什么。

我尝试使用此代码，来自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.html 并且没有显示验证消息，然后我替换了 index.html 正文并且它有效，我不知道我的项目中可能存在什么问题。

我还尝试从项目中删除我的 angular.json scripts、styles 和 assets 中的 boostrap 和任何依赖项，但仍未显示。

【问题讨论】：

您使用的是哪个版本的 Angular？
我正在使用 Angular 11.1.4
我已经详细分享了我的答案，请查看

标签： angularjs angular forms validation

【解决方案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 中创建表单

app.component.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>

您还可以在 Reactive Forms 中设置多种类型的验证器。更多参考请参考this链接。

【讨论】：

【解决方案2】：

角度验证的工作方式与普通 js 不同：

您可以通过被动方式进行操作：https://angular.io/guide/form-validation#validating-input-in-reactive-forms
或模板驱动方式：https://angular.io/guide/form-validation#validating-input-in-template-driven-forms

通常，反应式方式是首选，因为如果代码库变得更大，它可以更容易地重构为组件

【讨论】：