Как выделить текст в заполнителе для ввода текста в angular?

Question

Я пытаюсь выделить искомый текст на сайте материалов angular.

Я использую трубу, подобную этой:

export class HighlightSearch implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(value: any, args: any): any {


        if (!args) {
            return value;
        }

        if (args.length < 1) {
            return value;
        }
        // Match in a case insensitive maneer
        const re = new RegExp(args, 'gi');
        const match = value.match(re);

        // If there's no match, just return the original value.
        if (!match) {
            return value;
        }

        const replacedValue = value.replace(re, "<mark style='background-color: #FAA50A; padding:0em;'>" + match[0] + "</mark>");
        return this.sanitizer.bypassSecurityTrustStyle(replacedValue);
}
}

В компоненте, который я использую трубу как:

<mat-label class="combobox-label" [innerHTML]="cstic.label | highlight: searchInput"></mat-label>

Это работает.

рабочая подсветка

Но когда я пытаюсь выделить искомый текст в заполнителе не работает ...

Я пытался использовать его так:

<input matInput  [placeholder]="cstic.label | highlight: searchInput" value={{cstic.assignedValue}}
                     [(ngModel)]="cstic.assignedValue" />

Но я получаю следующий результат:

не работает выделите

У кого-нибудь есть идеи, как я могу решить эту проблему?

Answer 1

Я нашел решение. Я удалил заполнитель из поля ввода и добавил метку, которая ведет себя точно так же, как заполнитель, но подсветка работает для него.

Поэтому вместо этого кода:

<mat-form-field>
                <input matInput placeholder={{cs.label}} [disabled]="cs.readOnly" value={{cs.value}}
                    [(ngModel)]="cs.assignedValue"                 [errorStateMatcher]="matcher" >
                <mat-label [innerHTML]="cs.label | highlight: searchInput">{{cs.label}} 
                 </mat-label>
            </mat-form-field>

I ' мы положили это:

<mat-form-field>
                <input matInput [disabled]="cs.readOnly" value={{cs.value}}
                    [(ngModel)]="cs.assignedValue"                 [errorStateMatcher]="matcher" >
                <mat-label [innerHTML]="cs.label | highlight: searchInput">{{cs.label}} 
                 </mat-label>
            </mat-form-field>