angular 输入必填字段无效
angular input required field not working
我有一个用于创建新实体的表单,如下所示:
<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}}
这总是 return 错误,即使我在输入字段中单击并单击退出,也没有填写任何内容。作为必填字段,它不应该 return 正确吗?
我曾使用过类似的表格,编辑数据,在那里我使用了 [ngModel] 并且工作正常,验证了必填字段。这里也需要 [ngModel] 吗?如果需要,为什么?因为我正在传递表单的值。
您需要将 ngModel 添加到输入中才能使用 Angular 的表单验证。
简而言之,ngForm 仅检查具有 ngModel 和名称的元素。没有这些,Angular 将无法验证。
改成这样:
<input name="applicationName" ngModel required id="applicationName" type="text" class="form-control" placeholder="Name of application..." />
您是否创建了一个表单控件,您必须在该表单控件中放置所有验证。
我有一个用于创建新实体的表单,如下所示:
<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}}
这总是 return 错误,即使我在输入字段中单击并单击退出,也没有填写任何内容。作为必填字段,它不应该 return 正确吗?
我曾使用过类似的表格,编辑数据,在那里我使用了 [ngModel] 并且工作正常,验证了必填字段。这里也需要 [ngModel] 吗?如果需要,为什么?因为我正在传递表单的值。
您需要将 ngModel 添加到输入中才能使用 Angular 的表单验证。
简而言之,ngForm 仅检查具有 ngModel 和名称的元素。没有这些,Angular 将无法验证。
改成这样:
<input name="applicationName" ngModel required id="applicationName" type="text" class="form-control" placeholder="Name of application..." />
您是否创建了一个表单控件,您必须在该表单控件中放置所有验证。