Question

我正在使用基于模板的表格。我还使用了引导程序（v4），并且希望在提交表单时显示一些验证消息。

这是我的表格：

<form [ngClass]="{'was-validated': wasValidated}">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" class="form-control" [(ngModel)]="category.name" #name="ngModel" required maxlength="100"/>
    <div *ngIf="name.invalid" class="invalid-feedback">
      <div *ngIf="name.errors.required">
        Name is required.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success" (click)="save()">Save</button>
</form>

我的组件如下所示：

category: Category;

wasValidated: boolean = false;

ngOnInit() {
    this.reset();
}

save() {
    this.wasValidated = true;
    this.categoriesService.createCategory(this.category).subscribe(
        () => {
            this.notificationService.add(notifications.category_saved, {name: this.category.name});
            this.reset();
        },
        () => this.notificationService.add(notifications.save_category_failed)
    );
}

reset() {
    this.wasValidated = false;
    this.category = {} as Category;
}

这可行，但是我觉得它过于复杂，更像是一种变通方法，而不是正确的方法。最好的方法是什么？

注意：类was-validated必须出现在表单元素上，以便显示类为invalid-feedback的div。我正在使用此：https://getbootstrap.com/docs/4.0/components/forms/#validation

注2：我目前尚无机制来防止错误提交表单。我也想知道一个好的解决方案！

Answer 1

有了@Chellappan V的回答，我得以构建所需的解决方案。

我已应用以下更改：

首先将#form="ngForm"添加到模板中的表单标签。其次，我更改了ngClass表达式以引用表单的提交状态，而不是引用在提交表单时手动将其设置为true的布尔值。最后但并非最不重要的一点是，我在保存按钮上的Submit方法中传递了表单。

<form novalidate #form="ngForm" [ngClass]="{'was-validated': form.submitted}">
    <!-- form controls -->
    <button type="submit" class="btn btn-success" (click)="submit(form)">Save</button>
</form>

在组件中，我在模板变量中注入了@ViewChild。

@ViewChild("form")
private form: NgForm;

submit方法现在采用NgForm类型的表单参数，该参数用于在向后端发送请求之前检查表单是否有效：

submit(form: NgForm) {
    if (form.valid) {
        this.categoriesService.createCategory(this.category).subscribe(
            () => {
                this.notificationService.add(notifications.category_saved, {name: this.category.name});
                this.reset();
            },
            () => this.notificationService.add(notifications.save_category_failed)
        );
    } else {
        this.notificationService.add(notifications.validation_errors);
    }
}

最后，reset方法将重置表单和模型，以便可以重新输入它以提交下一个实例：

reset() {
    this.form.resetForm();
    this.category = {} as NewCategoryDto;
}

如何在表单上动态设置“已验证”类，以在提交后以角度5显示验证反馈消息

1 个答案: