按钮单击时的反应式表单验证

Question

我正在尝试验证 Angular 项目中的输入字段并使用教程，似乎它按预期工作。

Validation in Angular

上面使用 Reactive Form 来完成如下的验证工作：

<form [formGroup]="angForm" novalidate>
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control" formControlName="name" type="text">
    </div>
    <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['name'].errors.required">
          Name is required.
        </div>
    </div>
     <div class="form-group">
        <label>Address:</label>
        <input class="form-control" formControlName="address" type="text">
    </div>
    <div *ngIf="angForm.controls['address'].invalid && (angForm.controls['address'].dirty || angForm.controls['address'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['address'].errors.required">
          email is required.
        </div>
    </div>
    <button type="submit"
        [disabled]="angForm.pristine || angForm.invalid" class="btn btn-success">
        Save
    </button>
</form>

上面的按钮默认是禁用的。因此，当用户开始编写并将输入字段保留为空白时，它会验证表单。我的要求是启用按钮，单击时，验证将起作用。所以我的做法如下：

<form [formGroup]="angForm" #addData='ngForm' (ngSubmit)="AddData(addData)">

<button type="submit" class="btn btn-success"> //Removed the disabled property
   Save
</button> 

在TypeScript 中这样做了：

AddData(addData: NgForm) {
  this.createForm();
}

createForm() {
  this.angForm = this.fb.group({
    name: ['', Validators.required ]
  });
}

虽然它没有按预期触发验证。所以我想要的是触发我无法在此处执行的按钮单击验证。有什么办法可以解决？

Answer 1

也许您可以在 AddData 函数上添加一些逻辑：

AddData() {
  if (this.angForm.valid) {
    //Logic for valid form
  } else {
    Object.keys(this.angForm.controls).forEach(field => {
    const control = this.form.get(field);
    control.markAsTouched({ onlySelf: true });
   });
  }
}

这将在用户单击按钮时将元素标记为已触摸，这将触发用于在输入上显示错误消息和样式的逻辑，假设是：

!this.angForm.controls['name'].valid && this.angForm.controls['name'].touched;