结合 HTML 和 Angular 反应式表单验证

Question

我正在构建一个 Angular Reactive Form，并且我有一个数字类型的输入。我已经向 FormControl 提供了 Validators.min(0)，但是当我聚焦输入并向下滚动或按住向下箭头按钮时，该值会低于 0。将 Angular 验证器与像 min 这样的本机 html 验证器结合起来是一个不好的做法吗？

这是我现在拥有的

HTML

<input type="number" formControlName="quantity">

TS

quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),

这就是我尝试过的

HTML

<input type="number" min="0" formControlName="quantity">

TS

quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),

看起来工作正常，但仍然不确定这是否被认为是一种不好的做法以及这种方法是否存在任何陷阱。

Answer 1

对于这种情况，这是可以的，因为最多您将获得添加两次相同的验证，这不是问题。您只是使用 html 属性来限制负值，而不是进行额外的验证，而这些验证可以简单地通过反应式表单验证来完成。

所以我认为你的代码更改很好！否则我们需要编写一个阻止负值的角度指令，这是一个更简单的解决方案！

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormsModule,
  FormBuilder,
  Validators,
  ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="form">
    <input type="number" min="0" formControlName="quantity"/>
    {{ form?.get('quantity')?.errors | json }}
</form>
  `,
})
export class App {
  name = 'Angular';
  form = this.fb.group({
    quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),
  });
  constructor(private fb: FormBuilder) {}

  ngOnInit() {}
}

bootstrapApplication(App);

Stackblitz 演示