在 Angular 中单击提交按钮时验证表单答案

【问题标题】：Validating Form on Submit button click in Angular在 Angular 中单击提交按钮时验证表单
【发布时间】：2020-05-09 20:11:51
【问题描述】：

我创建了一个有角度的反应形式。我能够在触摸时获得控件的验证，但没有通过单击提交按钮在提交表单时得到验证。我的代码如下：

<form [formGroup]="myform" (ngSubmit)="SubmitDetails()">
  <div class="row">
      <label for="name">Name:</label>

  <input type="text" id="Name" name="Name" formControlName="Name"/>
  <span *ngIf="myform.controls.Name.invalid && myform.controls.Name.touched">Please Enter Name.</span>

  </div>
<br/>
<div class="row">
    <label for="age">Age:</label>
  <input type="text" id="Age" name="Age" formControlName="Age"/>
<span *ngIf=" myform.controls.Age.invalid && myform.controls.Age.touched">Please Enter Age.</span>
</div><br/>

  <button type="submit">Submit</button>
</form>

【问题讨论】：

试试<button type="submit" (click)="SubmitDetails()">Submit</button>
我不这么认为写客栈功能和验证所有的东西。它应该在提交时验证。我见过一个属性是如何“感动”存在的。我可以得到像在指令中提交的任何其他属性吗？
你到底想要什么？
试试这个：myform.controls.Name.invalid && (myform.controls.Name.touched || myForm.submitted)
在提交表单时，我应该得到需要的字段消息，例如我如何立即使用“myform.controls.Age.touched”行触摸控件。

标签： angular angular-reactive-forms

【解决方案1】：

您可以使用 formGroup 的属性 vaild 检查您的表单是否有效：

this.yourFormGroup.valid;

在您的提交功能上，只需检查表单是否有效，如果是，则继续，否则将表单标记为脏或已触摸：

submitFunction() {
  if(this.yourFormGroup.valid) {
    console.log('it s ok!');
  }else {
    this.yourFormGroup.markAsDirty();
}

编辑：我对在formGroup上使用markAsDirty有疑问，如果它不起作用，只需简单地循环formGroup中的所有formControl，并将它们标记为dirty()：

this.yourFormGroup.get('yourFormControl').markAsDirty();

【讨论】：

请参考这个“stackblitz.com/edit/angular-7-reactive-form-validation”他们没有使用函数。
是的，这是另一种方法，在他们的情况下，他们检查 formContol.errors 而不是 formControl.touched
是的，我尝试了同样的方法...但是除了单击按钮之外一切正常。

【解决方案2】：

如果表单无效，您可以为按钮添加禁用状态。不确定这是否适用于您的 UI/UX 方法，但值得一提。

<button type="submit" [disabled]="form.invalid">Submit</button>

【讨论】：