angular - Validators.minlength 不适用于 Angular react 形式

Question

我用 Angular 创建了一个简单的表单。我使用了两次验证。所需的验证工作正常，但 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

验证器工作正常，

minLengthValidator that requires the length of the control's value to be greater than or equal to the provided minimum length. This validator is also provided by default if you use the the HTML5 minlength attribute. Note that the minLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays. The minLength validator logic is also not invoked for values when their length property is 0 (for example in case of an empty string or an empty array), to support optional controls. You can use the standard required validator if empty values should not be considered valid. Source minLength()

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

minValidator that requires the control's value to be greater than or equal to the provided number. The validator exists only as a function and not as a directive.

参见this demo on stackblitz