Question

表格验证存在问题。

我想仅在表格有效时提交表格。

但是使用空输入并单击“提交”按钮正在提交表单，尽管输入为空。

<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && addEquipment()" validate>

输入就是这样。

 <input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only.">

我不能发布整个代码。

这个

表单初始化

f.form.valid 为true

想要实现这样的目标

<div *ngIf="!model.equipmentModel && f.submitted" class="text-danger">
                        Please enter Equipment Model
</div>

因此，在提交时，我想显示此消息而不是默认浏览器。但是这个 f.form.valid 在默认情况下是该死的。

Answer 1

您应该在input代码中添加pristine属性，然后正如@Cobus Kruger所提到的那样，表格将不会被提交，直到它被填满。

但是，您也可以尝试dirty，<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && f.form.dirty ? addEquipment() : ''" validate>选项，这样您就可以检查用户是否对表单进行了任何更改，因此在这种情况下您的情况可能如下所示：< / p>

 <input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only." required />

和输入：

$data['data']['metas']

在这种情况下，它将检查是否对输入应用了任何更改，并在满足两个条件时提交表单。

Answer 2

如果在输入中指定required属性，则除非填写了值，否则不会提交表单。但是这仅涵盖未提供的值，您可能需要检查无效值是否为好。

通常的方法是禁用提交按钮，除非表单有效。像这样：

<button type="submit" [disabled]="!f.form.valid">Submit</button>

Angular documentation about form validation也表明了这一点。查看“简单模板驱动表单”部分的底部附近

Answer 3

在您提交的函数中，您可以将表单作为参数传递然后检查。在html中，您需要传递表单实例：

<form name="equipmentForm" #f="ngForm" (ngSubmit)="addEquipment(f)" validate>

在打字稿中：

addEquipment(form){
   if(form.invalid){
       return;
   }

   //If it is valid it will continue to here...
}

Angular 2表单默认有效

3 个答案: