Angular Reactive Form-点击按钮验证表单

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为true时显示错误

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

StackBlitz 演示

---

附加

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

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

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

(改进(StackBlitz 演示

Answer 2

Hi您可以创建一个函数，将表单上的所有控件标记为已触摸，并在表单无效时激发它。

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

我希望这能帮助你，问候。