angular - 输入类型编号步骤验证 - 自定义表单验证

Question

我有一个使用响应式(Reactive)形式的 Angular 应用程序。我的输入字段之一是数字类型，我使用 step 指令来确定有效值，如下所示:

steps = 0.25
myForm: FormGroup

constructor(private fb: FormBuilder) {
  myForm = this.fb.group({
      numberControl: new FormControl(null)
  });

---

<input type="number" step="{{steps}}" formControlName="numberControl">

步骤属性可以根据应用程序的其他输入进行更改，但为了简单起见，我没有将其包含在本示例中。我的问题是表格始终有效。当我使用输入字段的向上和向下箭头键时，该步骤有效，但我可以手动输入任何值，它仍然有效。

Stackblitz 示例:https://stackblitz.com/edit/angular-rhyeeb

感谢任何帮助!

Answer 1

默认情况下，数字输入字段不会验证用户手动输入的数字是否能被步数计数器整除。如果您想要这样的功能，那么您必须实现一个自定义验证器，这非常简单。

您所要做的就是创建一个函数来验证数字输入字段，然后将新创建的验证器包含在 FormControl 对象的 Validators 数组中。当您的自定义验证测试通过时，您的验证器函数应该返回 null 值，或者返回详细说明失败原因的键值对映射。

找到下面的代码片段，演示如何使用自定义验证器来检查当前输入值是否为有效步骤。

export class AppComponent implements OnInit {
  steps = 0.25;
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      numberControl: new FormControl(null, [
        Validators.required,
        this.validateNumField.bind(this)
      ])
    });

    this.myForm.valueChanges.subscribe(_ => {
      if (!this.myForm.valid) {
        console.log('err msg -> ', this.myForm.get("numberControl").errors);
      }
    });
  }

  validateNumField(control: AbstractControl): { [key: string]: any } {
    let rem = control.value && Number.parseFloat(control.value) % this.steps;
    // console.log(rem);

    /**
    * If the remainder is not 0 then user has entered an invalid value
    */
    return rem ? { error: "Not a valid step" } : null;
  }
}

现在，如果不是有效步骤，您的提交按钮将不起作用。如果您想使用 this.myForm.get("numberControl").errors 属性，您可以继续在模板上显示错误消息。

您可以在 stackblitz here 中找到一个工作示例。有关自定义验证的更多信息，请访问 Angular docs .

编辑:更新了答案以捕获步数值的变化。