html - 在 Angular 中编辑输入文本

Question

我有一个Angular带有输入类型文本的表单，我需要通过点击编辑按钮来编辑它。

我有 3 个按钮，edit更改cancel和save更改。

如果按下编辑按钮，则启用输入以能够对其进行修改，隐藏编辑按钮并显示保存和取消按钮。

如果按下取消按钮，则取消更改并显示最初显示的文本，仅显示编辑按钮。

如果按下保存按钮，当前更改将被保存并替换为以前的信息，并且仅再次显示编辑字段。

这是我的 html，只有一个input：

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">
<button class="btn"><i class="fa fa-pencil"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-save"></i></button>

我怎样才能在页面上获得这种行为？我应该添加哪些功能component.ts？

标签： htmlangularangular-materialangular11