Angular 6 input range validation - angular6

Question

I have to validate one of the input element in my ngForm
How to validate range while submit that form
For example user should enter the price between $1000 to $2000
Please give the suggestions to proceed
Thanks

Answer 1

Try this
<form [formGroup]="myForm">
<label for="priceRange">Price Range: </label>
<input type="number" id="priceRange" formControlName="priceRange">
<div *ngIf="f.priceRange.errors">
Invalid Price Range
</div>
in component.ts
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '#angular/forms';
myForm = new FormGroup({});
get f() {
return this.myForm.controls;
}
constructor(private formBuilder: FormBuilder){
this.myForm = formBuilder.group({
priceRange: ['', [Validators.min(1000), Validators.max(2000)]]
});
}

Answer 2

Try this working Example
link
<h3>Reactive Forms Validator Example</h3>
<br>
<label>We have created two validators using slightly different approaches that validate if the input is equal to "A" or not.</label>
<br><br>
<label>Doesn't work because the method is not executed which will return the custom validator function.</label><br>
<input type="text" [formControl]="wrongOnlyA">
<br><br>
<label>Works because the method is executed.</label><br>
<input type="text" [formControl]="correctOnlyA">
<br><br>
<label>Works because the validator function is directly exported.</label><br>
<input type="text" [formControl]="onlyB">
.ts
import { Component, OnInit } from '#angular/core';
import { FormGroup } from "#angular/forms"
import { RxFormBuilder } from '#rxweb/reactive-form-validators';
import { FormBuilderConfiguration } from '#rxweb/reactive-form-validators';
import { EmployeeInfo } from '../employee-info.model';
#Component({
selector: 'app-employee-info-add',
templateUrl: './employee-info-add.component.html'
})
export class EmployeeInfoAddComponent implements OnInit {
employeeInfoFormGroup: FormGroup
constructor(
private formBuilder: RxFormBuilder
) { }
ngOnInit() {
let employeeInfo = new EmployeeInfo();
let formBuilderConfiguration = new FormBuilderConfiguration();
formBuilderConfiguration.validations = {
age : {
range : {minimumNumber:18,maximumNumber:60,}
},
experience : {
range : {minimumNumber:2,maximumNumber:20,conditionalExpression:'x => x.age >=25',}
},
salary : {
range : {minimumNumber:1000,maximumNumber:200000,message:'Your Salary should be between 10000 to 200000.',}
},
};
this.employeeInfoFormGroup = this.formBuilder.formGroup(employeeInfo,formBuilderConfiguration);
}
}