Angular 表单验证 - hasError min 不起作用
Angular Form Validation - hasError min doesnt work
我想在值为 0 时显示错误,但它不起作用。
HTML:
<mat-form-field>
<input matInput type="number" placeholder="{{ 'device.new.windowHeight' | translate }}" [(ngModel)]="currentDevice.windowHeight" formControlName="windowHeight">
<mat-error *ngIf="form.hasError('min')">0 is forbidden</mat-error>
</mat-form-field>
TS:
form = new FormGroup({
windowHeight: new FormControl(0, [
Validators.min(1),
Validators.max(10),
Validators.required
]),
});
有谁知道为什么这不起作用? Angular 文档说有一个最小值或最大值。
试试这个:
直接指向控制器即可。
<mat-error *ngIf="form.controls['windowHeight'].errors">0 is forbidden</mat-error>
您所犯的主要错误是您将模板驱动的表单和反应式表单混合在一起。只需删除 [(ngModel)]
指令
<mat-form-field>
<input matInput type="number" placeholder="{{ 'device.new.windowHeight' | translate }}" formControlName="windowHeight">
<mat-error *ngIf="form.get('windowHeight').hasError('min')">0 is forbidden</mat-error>
</mat-form-field>
注意行 form.get('windowHeight').hasError('min')
。我们获取控件并检查它是否有 Error min
选项 1
<mat-error *ngIf="yourformgroupname.get('windowHeight').hasError('min')">0 is forbidden</mat-error>
选项 2
***In your ts file***
form: any;
get windowHeight() {
return this.form.get("windowHeight");
}
this.form = new FormGroup({
windowHeight: new FormControl(0, [
Validators.min(1),
Validators.max(10),
Validators.required
]),
});
***HTML Template***
<mat-error *ngIf="windowHeight.hasError('min')">0 is forbidden</mat-error>
Stackblitz - https://stackblitz.com/edit/angular-mat-form-validation-eg-b34zsw?file=app/input-error-state-matcher-example.html
我想在值为 0 时显示错误,但它不起作用。
HTML:
<mat-form-field>
<input matInput type="number" placeholder="{{ 'device.new.windowHeight' | translate }}" [(ngModel)]="currentDevice.windowHeight" formControlName="windowHeight">
<mat-error *ngIf="form.hasError('min')">0 is forbidden</mat-error>
</mat-form-field>
TS:
form = new FormGroup({
windowHeight: new FormControl(0, [
Validators.min(1),
Validators.max(10),
Validators.required
]),
});
有谁知道为什么这不起作用? Angular 文档说有一个最小值或最大值。
试试这个:
直接指向控制器即可。
<mat-error *ngIf="form.controls['windowHeight'].errors">0 is forbidden</mat-error>
您所犯的主要错误是您将模板驱动的表单和反应式表单混合在一起。只需删除 [(ngModel)]
指令
<mat-form-field>
<input matInput type="number" placeholder="{{ 'device.new.windowHeight' | translate }}" formControlName="windowHeight">
<mat-error *ngIf="form.get('windowHeight').hasError('min')">0 is forbidden</mat-error>
</mat-form-field>
注意行 form.get('windowHeight').hasError('min')
。我们获取控件并检查它是否有 Error min
选项 1
<mat-error *ngIf="yourformgroupname.get('windowHeight').hasError('min')">0 is forbidden</mat-error>
选项 2
***In your ts file***
form: any;
get windowHeight() {
return this.form.get("windowHeight");
}
this.form = new FormGroup({
windowHeight: new FormControl(0, [
Validators.min(1),
Validators.max(10),
Validators.required
]),
});
***HTML Template***
<mat-error *ngIf="windowHeight.hasError('min')">0 is forbidden</mat-error>
Stackblitz - https://stackblitz.com/edit/angular-mat-form-validation-eg-b34zsw?file=app/input-error-state-matcher-example.html