Angular 角度反应形式：如何倾听FormArray的FormControls中的变化

我使用的是Angular v11.2.3和vTypeScript 4.1.5。为我的项目使用反应式表单控件

我有一个对象“Artwork”，它的属性imageUrls是一个字符串数组，作为它的imageUrls。JSON表示形式如下所示：

{
“标题”：“蒙娜丽莎”，
“描述”：“带着神秘微笑的肖像画”，
...
“图像URL”：[
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1280px-蒙娜丽莎%2C_莱昂纳多•达芬奇%2C__C2RMF_retouched.jpg“
],
...
}

在这个艺术品的“编辑”视图中，我想渲染表单旁边的图像。我想让图像部分在编辑图像的URL时自动更新。如何在不提交整个表单的情况下实现“自动更新图像”

我当前的模板如下所示：

....
图像URL：

添加
图像{{i+1}}URL
删除大纲
....

我的组件如下所示：

导出类ArtworkDetailComponent实现OnInit{
artworkForm！：FormGroup；
artwork:{[index:string]：any}={}作为artwork；
....
ngOnInit（）：void{
if（this.artworkId）{
this.artwork=this.artworkService.getArtworkById（this.artworkId）；
}
this.initForm（）；
}
private initForm（）：void{
....
const ffImageUrls=新格式阵列（[]）；
this.artwork.imageUrls.forEach（（imageUrl:string，index:number）=>{
push（newformcontrol（{value:imageUrl，disabled:this.readOnly（）}））；
});
....
this.artworkForm=新表单组({
....
imageUrls:ffImageUrls，
....
});
}
getImageUrlCtrls（）：FormControl[]{
返回（this.artworkForm.get（'imageURL'）作为FormArray）。控件作为FormControl[]；
}
}

---

此时，当我更改表单中的url时，同一页面上的image div不会得到更新。任何帮助都将不胜感激

我读了Netanel Basal的博客，解决了我的问题

我的错误在html模板中，在这一行：

<input matInput [value]="imageUrl.value">

<input matInput [formContrl]="imageUrl">