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

Question

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

Angular 中的验证

上面使用反应式表单来完成验证工作，如下所示：

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