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

Question

У меня есть флажок в моем приложении.Когда пользователь устанавливает флажок, мне нужно, чтобы моя текстовая область была заполнена текстом, который нельзя удалить.Они могут добавить к тексту, но они не могут удалить его.

Так что, если строка Hello my name is, я хочу добавить это к текстовой области, и они не могут удалить, но они могут только добавить свое имя.

Однако, если они снимают флажок, мне нужно удалить текст Hello my name is, и пользователю просто разрешается вводить все, что он хочет.Я борюсь с частью, где, если они проверяют флажок и снимают его снова, чтобы они могли печатать ...

Вот что у меня есть:

addHelloMyNameIs(val) {
let message = "Hello my name is";
let isChat = val; // val is true or false
var readOnlyLength = message.length;
console.log(isChat)
  this.postTextarea = message + this.postTextarea;
  $('#newPostTextarea .text-input').on('keypress, keydown', function(event) {
    if(isChat) {
      if ((event.which != 37 && (event.which != 39)) &&
        ((this.selectionStart < readOnlyLength) ||
          ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
        event.preventDefault();
      }
    }
  });
 }


cancelHelloMyNameIs() {
    this.addHelloMyNameIs(false)
    this.postTextarea = this.postTextarea.replace("Hello my name is ", "")
    this.postTextarea = this.postTextarea.replace("Hello my name is", "")
  }

Но это нене работают, например, когда пользователь проверяет, а затем снимает флажок, он не может набрать снова.

Как я могу это исправить?Спасибо!

Answer 1

Вот вам рабочий стек стека https://stackblitz.com/edit/angular-nd7srq

Это минималистский пример, поэтому вы можете четко видеть, что происходит, и можете копировать любые соответствующие биты.

Код выглядит следующим образом:

import { Component, ViewChild } from '@angular/core';

const START = 'Hello my name is '

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  checked = false;
  taContent = '';

  checkChanged() {
    if (this.checked) {
      this.taContent = START + this.taContent;
    } else {
      this.taContent = this.taContent.split(START)[1];
    }
  }

  taChanged(txt) {
    if (this.checked) {
      if (txt.startsWith(START)) this.taContent = txt;
      else {
        const tmp = this.taContent;
        this.taContent = '';
        setTimeout(() => {
          this.taContent = tmp;
        })
      }
    } else {
      this.taContent = txt;
    }
  }
}

HTML:

<br>
<input type="checkbox" [(ngModel)]="checked" (change)="checkChanged()">
<br>
<br>
<textarea [ngModel]="taContent" (ngModelChange)="taChanged($event)">
</textarea>