Validators.minlength 不适用于 angular 反应形式
Validators.minlength is not working in angular reactive forms
我在 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);
}
}
我正确使用了验证器,我也在表单中使用了最小长度,但仍然没有用。
验证器工作正常,
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.
我在 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);
}
}
我正确使用了验证器,我也在表单中使用了最小长度,但仍然没有用。
验证器工作正常,
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.