बनाना पाठ इनपुट केवल स्वीकार प्रतिशत मूल्यों थोड़ा मुश्किल हो सकता है, यहाँ एक तरीका है कि ऐसा करने के लिए हटाने के द्वारा गैर संख्यात्मक मान और उनका कहना है ' %' अंत में.
महसूस मुक्त करने के लिए अपने विचारों को साझा करें!
बनाना पाठ इनपुट केवल स्वीकार प्रतिशत मूल्यों थोड़ा मुश्किल हो सकता है, यहाँ एक तरीका है कि ऐसा करने के लिए हटाने के द्वारा गैर संख्यात्मक मान और उनका कहना है ' %' अंत में.
महसूस मुक्त करने के लिए अपने विचारों को साझा करें!
आदेश में बनाने के लिए पाठ इनपुट स्वीकार फ्लोट संख्या और जोड़ने के लिए "%" अंत में:
<input id="id" type="text" formControlName="percentControl" (focusin)="start($event)"(focusout)="end($event)" />
end(e) {
// console.log(/^[0-9.]*$/.test(e.target.value));
if(!/^[0-9.]*$/.test(e.target.value))
e.target.value = e.target.value.replaceAll(/[^0-9.]/g, '').trim();
//add ' %' at the end
if(e.target.value.length)
e.target.value = e.target.value+ ' %';
//this part is needed when working with angular form validation (ngForm required
//or formGroup Validators.required), else null value won't trigger the validation
else
e.target.value = '0 %';
}
start(e) {
e.target.value = e.target.value.replace('%', '').trim();
}
//make sure to get rid from ' %' when posting data to the backend
//example with formControl
// the + is for converting string to number
dataToPost = +this.form.get('percentControl').value.replaceAll('%', '');
//Use Angular percent pipe
local: string = "en-US";
percentPipe:PercentPipe = new PercentPipe(this.local);
myVariable = this.percentPipe.transform(dataFromBackEnd/100);