Angular 反应式表单 - 单击按钮验证表单

Question

我有一个表单，我在其中使用FormBuilder来创建我的表单。 单击按钮时，我需要对其进行验证。

下面是我的 HTML：

<input id="user-name" name="userName" placeholder="Enter Username" formControlName="username" class="form-control" />
<label class="form-label" for="user-name">Username</label>

<div class="text-danger" *ngIf="loginForm.controls['username'].touched && loginForm.controls['username'].errors?.['required']">Please enter the username</div>

下面是.ts文件代码：

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.generateForm();
}

generateForm() {
  this.loginForm = this.formBuilder.group({
    username: [null, Validators.compose([Validators.required])],
    password: [null, Validators.compose([Validators.required])],
  });
}

现在，我不希望我的验证在点击按钮之前起作用。 当我按下按钮时，我想让它工作，如果有错误，它会显示我。

任何建议/解决方案都会对我有很大帮助。

Answer 1

1. 创建submitted的标志。

submitted = true;

2. 添加(ngSubmit)事件并将更新submitted到true 。 这表示当提交表单时， submitted的标志更新为true 。

<form [formGroup]="loginForm" (ngSubmit)="submitted = true">
  
  ...

  <button>Submit</button>
</form>

3. submitted时显示错误为真。

<div
  class="text-danger"
  *ngIf="submitted && loginForm.controls['username'].errors?.['required']"
>
  Please enter the username
</div>

演示@StackBlitz

---

额外的

您可能会发现，当您在未填写该字段的情况下提交表单时，它会显示错误消息（正确行为） 。 您填写该字段，错误消息消失（正确行为） 。 当您尝试清除该字段（为空白）时，出现了一条错误消息（错误行为） 。

这是因为提交的表单在submitted时将永远为真。 对于这种情况，您需要订阅表单的valueChanges事件并在用户输入和表单之前提交时重置submitted的标志。

import { debounceTime } from 'rxjs';

this.loginForm.valueChanges.pipe(debounceTime(500)).subscribe((_) => {
  if (this.submitted) this.submitted = false;
});

（改进）演示@StackBlitz

Answer 2

嗨，您可以创建一个 function 将表单上的所有控件标记为已触摸，如果表单无效则触发它。

submitForm(): void {
    if (this.loginForm.invalid) {
        this.markFormGroupTouched(this.loginForm);
        return;
    }
    // submit form actions
}

markFormGroupTouched(formGroup: FormGroup): void {
    ( Object as any).values(formGroup.controls).forEach(control => {
        control.markAsTouched();
        if (control.controls) {
            this.markFormGroupTouched(control);
        }
    });
}

我希望这对你有帮助，问候。