无法使用角度2+在文本区域中添加行号和错误状态

Question

here i am facing a typical issue i have a Dynamic json data which is

[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
]

And i have 2 text areas . In text area One i try to paste this json data and after click action i am getting data transferred into 2nd text area here everything works good but the issue is i unable to set the line number programmatic for the text area by using css

.textarea {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

i am setting the line number the problem with this approach is suppose if i get any error in particular line how can i highlight it.

now my issues are How can i add line numbers other than css way and how can show error in particular line if any i mean if i got error in line 5 & 10 then how can i high light those line

below is my stack blitz https://stackblitz.com/edit/angular-zgyxet

Answer 1

Unfortunately you can't change the css properties of certain lines of text in a textarea, but you can simulate a textarea by using the contenteditable attribute on a div and editing the div's css accordingly.

My approach to the solution was to split the inputted text by line break into an array of strings, adding a span around each line that results in an error, then joining the array back into a string.

Here's a StackBlitz showing my quick fix: https://angular-zclmnm.stackblitz.io

HTML

<div [innerHTML]="TextData1" contenteditable></div>

TS (note I removed some unneeded variables)

test(){
    var tempData = [];
    this.TextData1 = this.TextData.split("\n");                  // split TextData on line break

    this.TextData1.map(data => {
      if(error === true){                                        // Set error conditions
        data = data.replace(/\s+/g, '').trim();
        data = "<span class='highlight'>" + data + "</span>"     // Add class to error row
        tempData.push(data);
      } else{
        tempData.push(data);
      }
    });
    this.TextData1 = tempData.join('');
  }

note: don't forget to add encapsulation: ViewEncapsulation.None to the @Component decorator