如何在 Angular 5 和打字稿中使部分文本区域不可编辑？答案

【问题标题】：how to make a part of the text area non editable in angular 5 and typescript?如何在 Angular 5 和打字稿中使部分文本区域不可编辑？
【发布时间】：2019-07-31 19:41:54
【问题描述】：

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

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

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

我有一些 jquery 代码，我试图将其转换为打字稿。但是它也不能正常工作。 [您可以使用 jquery http://jsfiddle.net/zq4c873L/1/ 查看工作示例]

这是我在组件 html 模板中定义的文本区域

<textarea id="messageTxt" formControlName="message" rows="6" [placeholder]="'PLACEHOLDERS.MESSAGE' | translate" (keydown)="ensureMessagePrefixNonEditable(messageTxt.value)" (keyup)="calculateMessagingSegmentCount(messageTxt.value)" #messageTxt></textarea>

当用户按下一个键时，就会触发一个功能。即 ensureMessagePrefixNonEditable(messageTxt.value)。如果旧值与特定字符串不匹配，此函数会尝试替换旧值。

ensureMessagePrefixNonEditable(inputTxtMsg: string){


 console.log(inputTxtMsg);
    let originalValue: string = inputTxtMsg;
    if( !inputTxtMsg.startsWith(this.messagePrefix.concat(' ')) ) {
    this.messageControl.setValue(originalValue);
    }

}

但是问题是我能够从文本区域中删除该值。非常感谢任何帮助谢谢你

谢谢

【问题讨论】：

试试jsfiddle.net/ttwbxwon/66
由于您不接受我的回答，您是否找到了更好的方法？
我有一个像你一样的解决方案。即当用户删除“初始文本”时，我将使表单无效，因此用户无法提交表单，只有在验证成功后用户才能提交表单。这是一个直接的解决方案。但是客户不接受这个解决方案，所以我的经理不接受这个解决方案，这就是为什么我不接受你的回答。非常感谢您的解决方案。

标签： angular typescript

【解决方案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 示例。

【讨论】：