Angular Reactive Form Validator.min/max检查是否在检查值之前执行类型转换

Question

前言：

我问以下问题的部分原因是，当我在<input>字段上没有type=number的情况下执行form.value.purchaseCost时，我会得到一个字符串。为了手动检查字段，我不得不手动转换为Number。最初，我假设Angular会将值存储为表单上的数字，因为它有一个Validators.min约束

问题

这是字段定义：

<mat-form-field>
<input matInput type="number" formControlName="purchaseCost" placeholder="Purchase cost*">
<mat-error>Please enter a purchase cost</mat-error>
</mat-form-field>

这是验证器检查：

purchaseCost: new FormControl('', [Validators.required, Validators.min(0)]),

由于表单字段为type="number"，FormControl在检查字段中的条目是否大于0(min(0))之前是否执行转换？

此外，如果我们得到form.value.purchaseCost，我们是否需要在使用它之前将purchaseCost转换为数字，或者自字段type=number以来，Angular Reactive Forms实现是否为我们这样做？

换句话说，Angular Reactive Forms是否将值存储为<input>字段中包含的类型？

Answer 1

是的，它将在内部执行类型转换，同时根据您在表单控件上设置的规则进行验证。

因此，您可以选择删除输入中的type属性。如果您要删除它，我建议您在表单控件上包含另一个Validator，以便它检查输入是否为数字。

<mat-form-field>
<input matInput [formControl]="purchaseCost" placeholder="Purchase cost*">
<mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.required">Please enter a purchase cost</mat-error>
<mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.min">Min. value is 0</mat-error>
<mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.pattern">Please enter a number</mat-error>
</mat-form-field>

在您的component.ts上，我在purchaseCost表单控件上添加了一个regex模式验证器。

purchaseCost = new FormControl('', [
Validators.required, 
Validators.pattern("^[0-9]*$"), 
Validators.min(0)
]);

我在这里添加了一个演示。