Faire de la saisie de texte seulement accepter des valeurs en pourcentage peut être un peu délicat, voici une façon de le faire que par la suppression des non valeurs numériques et en ajoutant ' %' à la fin.
n'hésitez pas à partager vos idées!
Faire de la saisie de texte seulement accepter des valeurs en pourcentage peut être un peu délicat, voici une façon de le faire que par la suppression des non valeurs numériques et en ajoutant ' %' à la fin.
n'hésitez pas à partager vos idées!
afin de rendre la saisie de texte accepte les nombres réels et d'ajouter "%" à la fin:
<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);