Angular 5 表单未验证和提交答案

【问题标题】：Angular 5 form not validated and submittedAngular 5 表单未验证和提交
【发布时间】：2018-09-07 19:31:58
【问题描述】：

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

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

【问题讨论】：

逻辑&& 的第二个条件如果首先计算为false，则不会执行。这就是原因，onSubmit() 在表单出现错误时不会触发。您的情况非常好，请仅在表单为valid 时调用onSubmit。
你试过reactive form而不是Template-driven吗？
@ShashikantDevani 为什么需要响应式表单？
使用响应式表单，您可以轻松归档验证。
@AmitChigadani 我尝试省略第一个条件 mydocumentFrm.form.valid 并实现 *ngIf="filename.hasError('required')" 但是，提交的表单没有上传文件。有什么建议吗？

标签： angular angular5

【解决方案1】：

从 (ngSubmit) 行中删除 mydocumentFrm.form.valid。重写这个像 (ngSubmit)="onSubmit(mydocumentFrm)"

【讨论】：

那么验证呢？

【解决方案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 !");
    }
}

【讨论】：