如何使文本区域的一部分在角度5和打字稿中不可编辑？

Question

我有一个使用angular 5和typescript开发的角度项目。 在组件的html模板中，我有一个文本区域框。 我想使此文本区域中的前几个字符不可编辑。 您是否知道我该如何实现？

例如，从我的组件ts文件中，我可以设置初始值，例如：RMO到我的文本区域。

用户无法删除在文本区域中设置的文本RMO。

谢谢

Answer 1

一种骇人听闻的方法是在用户完成填写文本区域文本后（带有模糊或保存功能）以检查是否无法编辑的文本，如果没有，则将其重新添加。

即您有一个初始文本变量，希望成为不可编辑的文本initText: string = 'Initial text '，并且您有[(ngModel)]="taText"连接到<textarea>元素。使用ngOnInit()或constructor() {}设置this.taText = this.initText。然后在按钮上单击或模糊，检查taText是否仍然有您的初始文本，如果没有，请重新输入：

checkForSavedText(): void {
    this.fullText = this.taText;
    if (!this.fullText.includes(this.initText)) {
      console.log('Saved text not present');
      this.fullText = this.initText + this.taText;
      this.taText = this.fullText;
    } else {
      console.log('Saved text is present');
    }
}

这里是stackblitz的示例。