Question

我想通过Angular 5提交一个小型表单。表单中有一个文件上传字段。在.ts文件中，我已如下导入ngForm

import { NgForm }   from '@angular/forms';

出于测试目的，我只是将控制台文本放在表单提交方法中，如下所示：

onSubmit(form : NgForm) {
console.log("form submitted !");
}

html视图中的表单如下：

<form method="post" (ngSubmit)="mydocumentFrm.form.valid && onSubmit(mydocumentFrm)" #mydocumentFrm="ngForm">
<input class="form-control-file border" type="file" id="filename" required ngModel name="filename" #filename="ngModel">
                <small class="form-text text-muted">(Image, PDF or Word doc)</small>
                <div *ngIf="mydocumentFrm.submitted && filename.invalid" class="invalid-feedback">
                    <div *ngIf="filename.errors.required">Field is required</div>
                </div>
<div class="form-group">
                <button class="btn btn-secondary" type="submit">Upload</button>
            </div>
</form>

我看到，如果我没有选择任何文件，或者当我通过选择一个图像文件单击“提交”按钮时，该控制台表单都没有得到验证。但是，在控制台屏幕上没有发生错误。

Answer 1

从（ngSubmit）行中删除mydocumentFrm.form.valid。像（ngSubmit）=“ onSubmit（mydocumentFrm）”一样重写

Answer 2

您还可以禁用按钮并验证ts文件中的表单是否有效。

<button class="btn btn-secondary" [disabled]="!mydocumentFrm.valid" type="submit">Upload</button>

在您的ts文件中：

onSubmit(form : NgForm) {
    if (form.valid) {
        console.log("form submitted !");
    }
}

Angular 5表单未验证并提交

2 个答案: