One issue I am facing in my Angular form is with a numeric input field. The requirement is to set the minimum value as 3 and the maximum value as 10. However, upon loading the form, the default value should be 0. Users are expected to enter values ranging from 0 to between 3 and 10. Unfortunately, I encountered an error when trying to submit the form with the default value of 0. How can this be resolved?
The structure of the HTML page is outlined below.
<form #ConfigForm="ngForm" [formGroup]="sampleform" (ngSubmit)="onSendHandler()">
<mat-form-field class="mat-form-field" appearance="outline">
<input matInput formControlName="numValue"/>
<mat-error *ngIf="sampleform.get('numValue').hasError('pattern')">Numbers Only !
</mat-error>
<mat-error *ngIf="sampleform.get('numValue').hasError('min')">Min Value is
3</mat-error>
<mat-error *ngIf="sampleform.get('numValue').hasError('max')">Max Value is
10</mat-error>
</mat-form-field>
</form>
.ts file
//set default values
this.sampleform.patchValue({
numValue: 0
});
sampleform = new FormGroup({
numValue: new FormControl('', [Validators.pattern("^[0-9]*$"), Validators.min(3),
Validators.max(10)])
});