如何在 Angular 中创建实时更新的绑定文本输入？

Question

我正在创建一个带有 angular 和 electron 的本机应用程序，现在我正试图让用户选择创建文件夹的路径。我有两个单独的文本框，一个用于文件夹名称，另一个用于路径（绑定到电子对话框的输出）。我想让路径输入的值绑定到名称和路径。例如，当用户开始在名称框中输入内容时，文本会附加到路径框的值中，以显示将要创建的最终文件夹。我怎么能这样做？

我尝试过使用 Angular 的 keyup 绑定，但我不知道如何更改路径输入的值。我也尝试过使用插值，但它只会在通过对话框选择新路径时更新，并且当名称字段中没有任何内容时，它会显示为未定义。

这是我的组件 html：

<input #name type="name" placeholder="Name"><br>
<input #path type="text" value="{{ this.pathChosen + name.value }}"><button (click)="this.pathChosen = this.getPath()"><img src="assets/folder-icon.svg"></button><br>
<button>Create</button>

我希望该框能够实时更新，就像 https://docs.angularjs.org/api/ng/directive/ngBind 页面底部的示例一样，但这似乎只适用于 AngularJS，而不是添加到文本元素，它没有显示如何添加到输入元素（该示例使用 span 元素进行插值）。如果有人知道如何做到这一点，我非常感谢您的帮助。谢谢！

Answer 1

尝试：

<input #name type="name" placeholder="Name (input)="name.value=$event.target.value"><br>
<input #path type="text" [value]="this.pathChosen + name.value"><button (click)="this.pathChosen = this.getPath()"><img src="assets/folder-icon.svg"></button><br>
<button>Create</button>

您需要更新输入变量“name”的值。