税率的Angular4数据验证

Question

如何使用正确的税率验证器。税率应该是＆＃34; 0.08＆＃34;，不是＆＃34; 8＆＃34;或8％。当用户输入字段时，只有0.08这种格式允许，如果有任何其他格式给出错误将显示。想在angular4中使用它。

Answer 1

为此，您可以使用Reactive Forms。它们具有内置验证器，您可以轻松添加自定义验证器以满足您的需求。很高兴，有一个满足您需求的alrrady！

首先，首先创建变量：

myForm: FormGroup;

然后，注入表单构建器依赖项，并创建表单：

constructor(private FB: FormBuilder) {
  this.myForm = FB.group({
    tax: ['your initial value here', [Validators.pattern(/0\.\d{1,3}/)]]
  });
}

现在，你有一个模式验证器，上面写着

  

输入应以＆＃34; 0。＆＃34;开头，然后在该点之后有1到3个数字。

（您当然可以根据需要更改模式）。

现在，在你的HTML中：

<form [formGroup]="myForm" novalidate>
  <input type="text" formControlName="tax" [class.invalid]="myForm.hasError('tax', 'pattern')">
</form>

这将添加＆＃34;无效＆＃34;如果它与模式不匹配，则输入您的输入。

编辑如果您想在方法中执行此操作，请使用此HTML：

<input type="text" (input)="changeTaxrate(this.value)" />

在你的TS中：

changeTaxrate(value: string) {
  let match = value.match(/0\.\d{1,3}/);
  if (!match) { return; }
  // Do you code here
}