html 在Angular 模式下编辑输入文本

dl5txlt9 于 2023-01-15 发布在 Angular

关注(0)|答案(1)|浏览(155)

我在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中添加哪些函数？

Html

来源：https://stackoverflow.com/questions/67474713/edit-an-input-text-in-angular

1条答案

按热度按时间

4ktjp1zp1#

必须在ur *.ts文件中编辑= true

<div class="row g-0">
<div *ngIf="!toedit">
<label for=""> {{dataNew}} </label>
<div class="float-end">
<label><i class="fas fa-pencil p-1" (click)="toedit=!toedit"></i></label>
<label><i class="fas fa-minus-circle p-1" (click)="removeLabel(k)"></i></label>
</div>
</div>
</div>
<div class="row" *ngIf="toedit">
<div class="col-10 align-self-center">
<input type="text"/>
</div>
<div class="col-1 ms-1 align-self-center">
<label><i class="fas fa-check" [(ngModal)] = "dataNew" (click)="updateLabel(dataNew)"></i></label>
</div>
</div>

试试这个

赞(0）回复(0）举报 2023-01-15

我来回答

html 在Angular 模式下编辑输入文本

1条答案

相关问题

热门标签

最新问答