Wednesday, 28 October 2020

How to show error when user input full with number

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 ?

Stackblitz



from How to show error when user input full with number

No comments:

Post a Comment