Добавьте процент к значению ngModel Angular 6 (труба) - PullRequest
Новая
       7

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

0 голосов
/ 25 сентября 2018

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

Ответы [ 3 ]

0 голосов
/ 22 октября 2018 
@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
    }
   }
}

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

0 голосов
/ 22 октября 2018

Тебе не нужны трубы для этого.Вы можете реализовать это, используя (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('%','');}
0 голосов
/ 25 сентября 2018

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

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

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

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