Добавьте процент к значению ngModel Angular 6 (pipe)

Я хотел бы иметь значение на входе (из ngModel) и, в конце концов, иметь символ процента «%». Когда я пытаюсь сделать это с помощью настраиваемого канала, вначале все в порядке, но когда я удаляю значение из ввода и меняю его, этот процент добавляется каждый раз, когда вы вводите клавиатуру. Как я могу это изменить? Мне нужно разрешить ввести, например, «40» и после этого добавить «%», а сразу после «4» нет. Пример: https://stackblitz.com/edit/angular-ppkbwn?file=src%2Fapp%2Fapp.module.ts


angular pipe angular2-ngmodel
person emka26    schedule 25.09.2018    source источник
comment
Добавьте условную проверку if (val &&   -  person super cool    schedule 25.09.2018
comment
Вы можете попробовать этот альтернативный подход без использования конвейеров stackblitz.com/edit/angular-e96k2u   -  person super cool    schedule 25.09.2018

Ответы (3)


arrow_upward
1
arrow_downward 

@Pipe({ name: 'myPipe'})
export class MyPipe implements PipeTransform {
   transform(val) {
    if(String(val) === ''){
        return val;
    }else if (String(val).indexOf('%') === -1) {
        return val + '%';
    } else {
        return val
    }
   }
}

я думаю, вам нужно сначала иметь дополнительное условие if, чтобы проверить это

person Harsha vardhan    schedule 22.10.2018

arrow_upward
1
arrow_downward

Для этого не нужны трубы. Вы можете реализовать это, используя (focusout) в поле ввода

<input (focusin)="start($event)" (focusout)="end($event)" type="text" />

В вашем ts файле

start(e){
    if(e.target.value.indexOf('%') < 0)
    e.target.value =  e.target.value + '%';}
end(e){
   e.target.value = e.target.value.replace('%','');}
person Richard Pariath    schedule 22.10.2018

arrow_upward
0
arrow_downward

Вы можете сначала удалить %. Вот так (при условии, что у вас всегда есть числа, которые вы хотите отображать со знаком%):

@Pipe({ name: 'myPipe'})
export class MyPipe implements PipeTransform {
    transform(val) {
        debugger

        val = val.replace('%','');

        if (String(val).indexOf('%') === -1) {
            return val + '%';
        } else {
            return val
        }
    }
}
person kedenk    schedule 25.09.2018