Angular 输入必填字段不起作用

Question

我有一个用于创建新实体的表单，如下所示:

<form #createAppForm="ngForm"
        (ngSubmit)="createApplication(createAppForm.value)"
        autocomplete="false" novalidate>
    <div class="form-group"
         [ngClass]="{'error': createAppForm.controls.applicationName?.invalid && createAppForm.controls.applicationName?.touched}">
    <label for="applicationName">Application Name</label>
    <em *ngIf="createAppForm.controls.applicationName?.invalid && createAppForm.controls.applicationName?.touched">Required</em>
    <input name="applicationName" required id="applicationName" type="text"
           class="form-control" placeholder="Name of application..." />
    </div>

我没有在输入中使用 ngModel，因为表单在出现时应该是空白的，我正在将 createAppForm.value 提交给 ngSubmit。但是，每当我检查表单的有效属性时:

{{createAppForm.invalid}}

这总是返回 false，即使我在输入字段中单击并单击退出，也没有填写任何内容。作为必填字段，它不应该返回 true 吗？

我曾使用过类似的表单编辑数据，在那里我使用了 [ngModel] 并且工作正常，验证了必填字段。这里也需要 [ngModel] 吗？如果需要，为什么？因为我正在传递表单的值。

Answer 1

您需要将 ngModel 添加到输入中才能使用 Angular 的表单验证。

简而言之，ngForm 仅检查具有 ngModel 和名称的元素。没有这些，Angular 将无法验证。

改成这样:

<input name="applicationName" ngModel required id="applicationName" type="text" class="form-control" placeholder="Name of application..." />

More info on the official docs.