Validators.minlength 不适用于角度反应形式

Question

我用角度创建了一个简单的形式。我使用了两次验证。所需的验证工作正常，但 minLength 不起作用。

这是html代码：

<form [formGroup]="preferenceForm" (ngSubmit)="onSubmit()">
          <div class="mb-3">
            <label for="overs" class="form-label">Number of overs</label>
            <input type="number" formControlName="overs" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.overs.errors }"
                   id="overs" placeholder="Overs..">
            <div *ngIf="submitted && f.overs.errors" class="invalid-feedback">
              <div *ngIf="f.overs.errors.required">First Name is required</div>
              <div *ngIf="f.overs.errors.minlength">Choose at least 3 overs</div>
            </div>
          </div>
          <div class="mb-3">
            <label for="players" class="form-label">Number of players per team</label>
            <input type="number" formControlName="players" class="form-control"
                   [ngClass]="{ 'is-invalid': submitted && f.players.errors }" id="overs" placeholder="Players..">
            <div *ngIf="submitted && f.players.errors" class="invalid-feedback">
              <div *ngIf="f.players.errors.required">First Name is required</div>
              <div *ngIf="f.players.errors.minlength">Choose at least 3 players</div>
            </div>
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" formControlName="lastMan" type="checkbox" value="" id="last-man"/>
              <label class="form-check-label" for="last-man"> Last Man Standing</label>
            </div>
          </div>
          <div class="text-center b-3">
            <button type="submit" class="btn btn-light">Let's Start</button>
          </div>
        </form>

这是我的组件代码：

export class NewMatchComponent implements OnInit {
  public preferenceForm: FormGroup;
  public submitted = false;

  constructor(private formBuilder: FormBuilder, private appService: 
AppService) {
  }

  ngOnInit(): void {
    this.preferenceForm = this.formBuilder.group({
      overs: [8, [Validators.required, Validators.minLength(3)]],
      players: [8, [Validators.required, Validators.minLength(3)]],
      lastMan: [true]
    });
  }

  // tslint:disable-next-line:typedef
  get f() {
    return this.preferenceForm.controls;
  }

  onSubmit(): void {
    console.log(this.preferenceForm.value);
    this.submitted = true;
    if (this.preferenceForm.invalid) {
      return;
    }
    // const formData = this.preferenceForm.value;
    // this.appService.createNewMatch(formData.overs, 
formData.players, formData.lastMan);
  }

}

我正确使用了验证器，我还在表单中使用了 minlength，但仍然不起作用。

Answer 1

验证器工作正常，

minLength验证器，要求控件值的长度大于或等于提供的最小长度。如果您使用 HTML5 minlength 属性，则默认情况下也会提供此验证器。请注意，minLength 验证器仅用于具有数字长度属性的类型，例如字符串或数组。当值的 length 属性为 0 时（例如，空字符串或空数组的情况），也不会调用 minLength 验证器逻辑，以支持可选控件。如果空值不应被视为有效，您可以使用标准必需的验证器。源minLength()

基本上你使用了错误的验证器。将您的验证器更改为Validator.min(3)

min要求控件的值大于或等于提供的数字的验证器。验证器仅作为函数存在，而不是作为指令存在。

在 stackblitz 上查看此演示