Угловая форма 5 не подтверждена и не представлена

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

Вы также можете отключить кнопку и проверить, является ли форма действительной в вашем файле TS.

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

В вашем файле TS:

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

Answer 2

Удалить mydocumentFrm.form.valid из строки (ngSubmit). переписать это как (ngSubmit) = "onSubmit (mydocumentFrm)"