I have an angular/material form, where I have an input type number.
Since I am in asia, user can input full width digit, but I would like to show an error saying "half-width only".
I made the following
component
const CustomValidator = {
fullWidthNumber(control: AbstractControl): ValidationErrors | null {
console.log(control.value);
return control.value.toString().match(/[\uff00-\uff9f]/) ? { fullWidth: true } : null;
},
};
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
title = 'MyShopApp';
public altitudeControl: FormControl;
constructor() { }
ngOnInit() {
this.altitudeControl = new FormControl(2, [
Validators.required,
Validators.min(5),
Validators.max(10),
CustomValidator.fullWidthNumber,
]);
}
}
template
<form (ngSubmit)="altitudeControl.valid && setHeight(altitudeControl.value)">
<mat-form-field class="full-width">
<mat-label></mat-label>
<input matInput [formControl]="altitudeControl" name="altitude" type="number" />
<mat-error *ngIf="altitudeControl.hasError('max')">
ERROR.FIELD.MAX
</mat-error>
<mat-error *ngIf="altitudeControl.hasError('min')">
ERROR.FIELD.MIN
</mat-error>
<mat-error *ngIf="altitudeControl.hasError('fullWidth')"> ERROR.FIELD.FULL_WIDTH </mat-error>
<mat-error *ngIf="altitudeControl.hasError('required')">
ERROR.FIELD.REQUIRED
</mat-error>
</mat-form-field>
</form>
The problem is, when I add a full digit like 123, the content is removed, and the error never trigger.
How can I achieve it ?
from How to show error when user input full with number
No comments:
Post a Comment