Angular 在“提交”按钮上验证表单单击“提交”

我在angular中创建了一个反应形式。我可以通过触摸获得控件的验证，但单击submit按钮无法在提交表单时获得验证。我的代码如下：

<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>

姓名：
请输入您的姓名。


年龄：
请输入年龄。


提交

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

this.yourFormGroup.valid;

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

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

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

---

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

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

提交

试试

Submit

我不认为写inn funnction和验证所有东西都是这样。它将在提交时验证。我曾见过一处房产是如何“触动”的。我可以使用任何其他属性（如submitted in directive）获取吗？您到底想要什么？请尝试以下操作：

myform.controls.Name.invalid&（myform.controls.Name.toucted | | myform.submitted）

在表单提交时，我应该获得重新请求的字段消息，例如我如何立即使用“myform.controls.Age.toucted”行触摸控件。请参考此“”他们没有使用函数。是的，这是另一种方法，在他们的情况下，他们检查formControl.errors，而不是formControl.touched是的，我尝试了相同的。。。但除了按一下按钮，一切都正常。

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