Validators.minlength不能以角度反应形式工作

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

验证器工作正常，

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

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

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

在stackblitz 上查看此演示