Make part of Text From InputBox not Editable in Angular 7

Question

How do i Make a part of Text Not Editable ..

My .html code is

 <input type="text" placeholder="Enter Company Name" class="wc-form-control nobg" formControlName="subject" " id="subjectid">

My .ts code is to append the Input box with class

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit"> {{' + this.checboxvalue + '}} </span>');
        this.editecompanydetail.patchValue({subject: this.editecompanydetail.value.subject + el.innerHTML })

But it is getting appended with tag , Any solution on this ...

score 0 · Answer 1 · answered May 21 '20 at 14:04

You could try to add contenteditable="false" like this:

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit" contenteditable="false"> {{' + this.checboxvalue + '}} </span>');
        this.editecompanydetail.patchValue({subject: this.editecompanydetail.value.subject + el.innerHTML })

You could also try with readonly:

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit" readonly> {{' + this.checboxvalue + '}} </span>');
        this.editecompanydetail.patchValue({subject: this.editecompanydetail.value.subject + el.innerHTML })

hope it helps :)

Similar cases:

Make part of Text From InputBox not Editable in Angular 7

2 Answers2