代码之家 › 专栏 › 技术社区 › Niladri Banerjee - Uttarpara

Angular 5表格未经验证和提交

angular5 angular

0

Niladri Banerjee - Uttarpara · 技术社区 · 8 年前

我想通过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>

如果我没有选择任何文件,或者当我通过选择图像文件点击提交按钮时,控制台文本没有出现,我看到表单没有被验证。但是,控制台屏幕上没有出现错误。

2 回复 | 直到 8 年前

1

Rock 8 年前

删除mydocumentFrm。类型从(提交)行开始生效。重写如下内容(ngSubmit)=“onSubmit(mydocumentFrm)”

2

0

ghuntheur 8 年前

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

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

在您的ts文件中:

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