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

Question

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

我尝试使用此代码，来自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.jsonscripts、styles和assets中的boostrap和任何依赖项，但仍然没有显示。

Answer 1

对于angular以上的2+版本，您需要创建反应形式。请参阅以下代码以获取相同的

应用程序模块.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 {
}

现在你可以在你的应用程序中使用反应形式。组件。ts

应用程序组件.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中设置多种类型的验证器。请参阅此链接以获取更多参考。

Answer 2

验证在角度上的工作方式与在正常js:中的工作方式不同

• 您可以采用被动方式：https://angular.io/guide/form-validation#validating-无功形式的输入
• 或模板驱动方式：https://angular.io/guide/form-validation#validating-模板驱动表单中的输入

通常，反应式方式是首选的，因为如果代码库的越来越大，以后可以更容易地将其重构为组件