为什么在我的Angular项目中使用这个反应式表单示例时，验证器规则似乎不起作用？

我正在使用反应式表单进行一个角度项目，我对表单验证策略有以下疑问。我会尽量详细解释我做了什么，我的问题是什么

在我的组件HTML代码中，我添加了以下表单（使用Priming组件）：

然后在组件ngOnInit（）方法中，我定义了HTML表单中定义的所有字段，以检索用户在表单输入字段中插入的值：

ngOnInit() {

  this.projectForm = this.fb.group({
  idOrdine: [null, [Validators.required, Validators.minLength(5)]],
  dataInserimentoOrdine: [null, [Validators.required, Validators.minLength(5)]],
  statoOrdine: [null, [Validators.required, Validators.minLength(5)]],
  commessa: [null, [Validators.required, Validators.minLength(5)]],
  CIG: [null, [Validators.required, Validators.minLength(5)]],
  dataInizioAttivita: [null, [Validators.required, Validators.minLength(5)]],
  dataFineAttivita: [null, [Validators.required, Validators.minLength(5)]],
  referente: [null, [Validators.required, Validators.minLength(5)]],
  ruoloReferente: [null, [Validators.required, Validators.minLength(5)]],
  tipologiaDiPartecipazione: [null, [Validators.required, Validators.minLength(5)]],
  quotaPercentualeDiRTI: [null, [Validators.required, Validators.minLength(5)]],

  cliente: [null, [Validators.required, Validators.minLength(5)]],
  vatCliente: [null, [Validators.required, Validators.minLength(5)]],
  clienteFinale: [null, [Validators.required, Validators.minLength(5)]],
  vatClienteFinale: [null, [Validators.required, Validators.minLength(5)]],

  tipologiaContratto: [null, [Validators.required, Validators.minLength(5)]],
  importoContratto: [null, [Validators.required, Validators.minLength(5)]],
  linkContratto: [null, [Validators.required, Validators.minLength(5)]],
  dataSottoscrizioneContratto: [null, [Validators.required, Validators.minLength(5)]],

  nomeSocieta: [null, [Validators.required, Validators.minLength(5)]],
  vatSocieta: [null, [Validators.required, Validators.minLength(5)]],
  bu: [null, [Validators.required, Validators.minLength(5)]],

  presenzaAQ: [null, [Validators.required, Validators.minLength(5)]],
  linkIdentificativoAQ: [null, [Validators.required, Validators.minLength(5)]],
  accordoQaudro: [null, [Validators.required, Validators.minLength(5)]],
  residuoAccordoQaudro: [null, [Validators.required, Validators.minLength(5)]],
  compagineDiAQ: [null, [Validators.required, Validators.minLength(5)]]

});

最后，在我的HTML中，我定义了一个带有事件的按钮，用于检索用户在我的表单中插入的值，如下所示：

<button pButton type="button" label="Save" icon="pi pi-check" (click)="saveOrder($event)"></button>

它似乎可以工作：单击保存按钮saveOrder（）方法被调用，我可以看到this.projectForm.value字段包含用户插入表单中的值…直到现在一切都正常

问题与验证rooles有关。正如您现在看到的，我插入了相同的伪规则来测试它（然后我将为我的所有字段创建特定的验证）：

---

基本上，所有字段都是必填字段，并且至少需要5个字符。所以我认为如果我不编译一个特定的字段，或者如果我插入一个由组成的值，我会面临同样的问题。我用电脑把它修好了

ngNativeValidate

使用方法如下：-

<form ngNativeValidate [formGroup]="form" (ngSubmit)="onSubmit()">

---

我也面临同样的问题。我用电脑把它修好了

ngNativeValidate

使用方法如下：-

<form ngNativeValidate [formGroup]="form" (ngSubmit)="onSubmit()">

---

使用ReactiveForms时，Angular会在后台执行一些操作

在所有字段生效之前，this.form.valid将为false。这始终是提交表单时要检查的第一件事。如果这是错误的，不要继续保存任何东西。如果将[disabled]=“！form.valid”添加到按钮，它将保持禁用状态，直到所有验证通过

不在表单中填写任何内容，只需打开元素检查器并选择添加了验证的控件。您应该看到它在class属性中添加了ng invalid。您可以使用它来使用CSS突出显示错误字段

例如：

 .ng-invalid { border: 1px solid red }

<ng-container *ngIf="form.controls.get('idOrdine').errors">Error message</ng-container>

这种方法的背景是，即使用户刚进入页面，它也会显示错误

因此，通常会使用另一个类ng

.ng-touched.ng-invalid { ... }

它的问题是，只有当您至少访问一次该字段时，才会连接ng touched。为了能够使用它，您可以使用循环遍历所有控件并以编程方式触摸它们

还可以使用ngIf显示错误消息，以仅在出现错误时显示

例如：

 .ng-invalid { border: 1px solid red }

<ng-container *ngIf="form.controls.get('idOrdine').errors">Error message</ng-container>

错误消息

这最好与仅在表单提交上设置的变量一起使用，以便在首次加载页面时不会显示错误

---

您可以查看控件，也可以在提交时查看表单实例，以便更清楚地了解表单内部发生的情况。你可以找到很多方法来做同样的事情，但解决方案只能由确切需要的行为来决定。

Angular在后台使用ReactiveForms时会做一些事情

在所有字段生效之前，this.form.valid将为false。这始终是提交表单时要检查的第一件事。如果这是错误的，不要继续保存任何东西。如果将[disabled]=“！form.valid”添加到按钮，它将保持禁用状态，直到所有验证通过

不在表单中填写任何内容，只需打开元素检查器并选择添加了验证的控件。您应该看到它在class属性中添加了ng invalid。您可以使用它来使用CSS突出显示错误字段

例如：

 .ng-invalid { border: 1px solid red }

<ng-container *ngIf="form.controls.get('idOrdine').errors">Error message</ng-container>

这种方法的背景是，即使用户刚进入页面，它也会显示错误

因此，通常会使用另一个类ng

.ng-touched.ng-invalid { ... }

它的问题是，只有当您至少访问一次该字段时，才会连接ng touched。为了能够使用它，您可以使用循环遍历所有控件并以编程方式触摸它们

还可以使用ngIf显示错误消息，以仅在出现错误时显示

例如：

 .ng-invalid { border: 1px solid red }

<ng-container *ngIf="form.controls.get('idOrdine').errors">Error message</ng-container>

错误消息

这最好与仅在表单提交上设置的变量一起使用，以便在首次加载页面时不会显示错误

---

您可以查看控件，也可以在提交时查看表单实例，以便更清楚地了解表单内部发生的情况。您可以找到很多方法来做同样的事情，但解决方案只能由确切需要的行为来确定。

这是预期的行为表单在满足定义的验证标准之前仍然无效，您只需添加自定义逻辑，在模板中显示正确的错误消息，并在表单生效之前阻止调用API

public saveOrder() {
  // if form is invalid do not do any action.
  if (this.projectForm.invalid) {
     return
  }

 // call api or whatever your logic once form is submitted with valid data.
}

如果您打印

console.log（this.projectForm.controls）

您将看到所有控件及其属性，您可以注意到每个表单控件的状态，即

有效

，

触摸

，

原始

，

脏

---

根据每个表单控件状态，您可以显示相关信息。

这是预期的行为表单在满足定义的验证条件之前仍然无效，您只需添加自定义逻辑并在模板中显示正确的错误消息，并在表单生效之前阻止调用API

public saveOrder() {
  // if form is invalid do not do any action.
  if (this.projectForm.invalid) {
     return
  }

 // call api or whatever your logic once form is submitted with valid data.
}

如果打印

console.log（this.projectForm.controls）

您将看到所有控件及其属性，您可以注意到每个表单c的状态