在将项添加到数组后重置输入字段
在将项添加到数组后重置输入字段
提问于 2021-11-22 00:51:29
我正在创建一个使用数组的crud应用程序。在将项添加到数组后，html输入字段不清除/重置。我认为角没有重置方法，因为我在网上找不到任何东西。添加项后，如何清除输入字段？
这是我的代码：
app.component.html
<div class="container">
<div class="jumbotron text-center">
<h1>Angular CRUD</h1>
</div>
<div class="container">
<form class="form-inline custom-centered" name="itemForm">
<label for="item">Add an Item:</label>
<input type="text" class="form-control" name="Value" id="Value" #item>
<button type="submit" class="btn btn-success" (click)="create(item.value)" style="width: 80px;">Add</button>
</form>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of collection">
<td>{{item.name}}</td>
<td>
<button class="btn btn-info btn-sm mr-1">Edit</button>
<button (click)="deleteItem(item)" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</tbody>
</table>app.component.ts
export class AppComponent {
collection: any = [];
create(item: any) {
this.collection.push({
name: item
});
}
deleteItem(item: any) {
this.collection.splice(item, 1);
}
}有人能指点我吗，谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-22 02:31:44
具有反应性形式的reset()方法。但是这里没有使用反应性形式，所以这里重置输入的方法是，用以下方式替换您的方法-
(click)="create(item.value); item.value = ''"如果您的表单很大，则建议使用反应性表单。在本例中，您使用的内容很好。
Stack Overflow用户
发布于 2021-11-22 02:37:04
我想是你在里面写的
create() {
this.collection.push({
name: ''
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70059858
复制相关文章
相似问题
腾讯云开发者
