Angular 角度：将文本输入值绑定到textarea内的子字符串

假设我有一个textarea，里面有一些匹配模式的子字符串。是否有一种方法可以通过文本输入编辑该子字符串

示例： 我有一个包含下一个字符串的文本区域：

${1:scan1}
${2:scan2}
${3:scan3}

我订阅了它的valueChanges，并调用regex来获取该字符串的所有重复并将其转换为FormControl，而不是将其推送到FormArray，因此通过FormControl推送的值只是其中的文本（${scan1}->scan1）

导出类AppComponent实现OnInit{
textArea:FormControl=newformcontrol（“”）；
检测到的字符串：FormArray=新FormArray（[]）；
构造函数（）{}
恩戈尼尼特（）{
this.textArea.valueChanges.subscribe（（textBodyText:string）=>{
常量字符串=
textBodyText.match（/[$][{][1-9][0-9]*[：][a-zA-Z0-9]{0，}[}]/g）|；
this.detectedStrings.clear（）；
foundStrings.map（_string=>{
这个是.detectedStrings.push(
新表单控件(
_string.substring（_string.indexOf（“：”）+1，_string.indexOf（“}”））
)
);
});
});
}
}

然后，我将在列表中显示所有找到的扫描作为输入：

现在我想要的是，当我在输入中编辑文本时，textarea中的文本也会动态变化。（扫描1->扫描100）

---

注意：这只是一种娱乐

我希望我的代码对您有所帮助

第一步。将事件（keyup）添加到模板中

第二步。处理事件并更新文本区域

onKey（事件：any，索引：any）{
log（索引+'changed:'+event.target.value）；
this.textArea.setValue（'${1:scan1}\n${2:scan2}\n${3:scan33}'）；//这是一个示例。
}

我认为在

textArea

更新原始文本是很难的 但你们可能知道什么是需求，所以你们可以做出决定

---

这是我的

我遵循了以下步骤

找到所有匹配的标签及其各自的索引

创建控制输入

在

keyup

事件之后，从步骤1获取标签的相应开始索引

将

FormArray

控件中的最新值替换为

TextArea

更新

TextArea

演示

Typescript

@组件({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
name=“Angular”；
textArea:FormControl=newformcontrol（“”）；
格式：格式；
标签：任何；
//用于保存上一次更改的数组，用于避免超出堆栈大小的错误
//因为这是循环行为
格式更改：字符串[]=[]；
构造函数（）{
this.formArray=新的formArray（[]）；
}
恩戈尼尼特（）{
this.textArea.valueChanges.subscribe（（textBodyText:string）=>{
常量正则表达式=/[$][{][1-9][0-9]*[：][a-zA-Z0-9]{0，}[}]/g；
const foundStrings=textBodyText.match（regex）| |[]；
this.tags=新对象（）；
让我们比赛；
while（（match=regex.exec（textBodyText））！=null）{
this.tags[match.index]=匹配[0]；
}
//清除已保存的数组
这个.formArray.clear（）；
foundStrings.map（str=>{
//获取控件的id和值
设id=str.substring（2，str.indexOf（“：”）；
让value=str.substring（str.indexOf（“：”）+1，str.indexOf（“}”）；
this.formArray.push（newformcontrol（value））；
});
});
this.textArea.setValue（${1:scan1}\n${1:scan1}\n${2:scan2}\n${3:scan3}”）；
}
OnControl键（索引：编号）{
让currTextAreaValue=this.textArea.value；
const tagStartIndex=Object.keys（this.tags）[index]；
log（tagStartIndex，this.tags[tagStartIndex]）；
const valueStartIndex=currTextAreaValue.indexOf（“：”，tagStartIndex）+1；//+1以删除：
设valueEndIndex=currTextAreaValue.indexOf（“}”，valueStartIndex）；
CurrTextArea值=
currTextAreaValue.子字符串（0，valueStartIndex）+
此.formArray.at（索引）.value+
currTextAreaValue.substring（valueEndIndex）；
this.textArea.setValue（currTextAreaValue）；
}
}

模板

所以当输入发生变化时，文本区域应该得到更新吗？对吗？对，对。这里的小技巧是，如果有两个相同的子字符串，则只有一个正在编辑的子字符串被更改。因此，如果有两个${1:scan1}，则只应更改已编辑的一个。这是结果吗？是的，这几乎是我想要的，谢谢。它不工作，只有当有两个相同的文本（2评论以上）。我得到了它的工作。没有，因为您正在设置固定字符串。@Plochie，谢谢，我不知道如何添加编码格式。