1

I'm creating an pipe in Angular 6 that return an textbox if pass some conditions. Because inputs are not safe.. I'm using the bypassSecurityTrustHtml to work around this problem. Now I have another problem.. it shows the textbox but I can't write to it or change it. Doesn't look disable but I can't select it and change anything. Anyone knows whats going on? Thanks!! 

import { Pipe, PipeTransform } from '@angular/core';
import { validateConfig } from '@angular/router/src/config';
import { TYPED_NULL_EXPR } from '@angular/compiler/src/output/output_ast';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'appConvertElement',
  pure: false
})

export class ConvertElementPipe implements PipeTransform {

  constructor( private _sanitizer: DomSanitizer) { }

  transform(text: string, field: string) {
    return this.ConvertValue(text, field);
  }

  private ConvertValue(text: string, field: string) {
    let transformText = text;


      if (condition)
        return this.createTextBox(text,field);
    }
    return transformText;
  }

  createTextBox(text,id) {
    let textBox = document.createElement('input');
    textBox.type = 'text';
    textBox.setAttribute("value", text);
    textBox.id = id;
    textBox.name = id;
    textBox.value = text;
    textBox.title = text;
   // return textBox.outerHTML;
    return this.safeHTML(textBox.outerHTML);
  }

  safeHTML(v: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }

}

the html is:

 <div [innerHTML]="value | appConvertElement: field"></div>
lesiano
  • 288
  • 3
  • 9
  • You're creating an input, from a div, through a pipe, and you wonder why it doesn't work ? Just use an input ... (and no, they're not safe, but neither is your method there). –  Sep 07 '18 at 11:33
  • And by the way, security is relative there, since your API is supposed to validate the data sent by Angular. –  Sep 07 '18 at 11:34
  • this is not the final code.. there is more code.. like validations.. and I can also return links or normal text.. depending a few validations and and parameters.. I can show different things.. – lesiano Sep 07 '18 at 12:00
  • That doesn't make it safer ! pipes aren't made to transform HTML elements into others. They're made to transform data for display purposes. I really suggest you read Angular's documentation before using it. –  Sep 07 '18 at 12:01
  • For Other who has a similar problem, this answer helped me:https://stackoverflow.com/a/60400799/6942504 – Was Mar 26 '21 at 09:33

0 Answers0