Angular4实现动态添加删除表单输入框功能

在Angular的世界里，表单的灵活性和动态性一直是我们关注的焦点。今天，我将为大家介绍如何使用Angular4实现动态添加和删除表单输入框的功能。想象一下，一个表单能够按需添加更多的输入字段，也能随时删除不必要的部分，这将极大地提高用户体验。

让我们看一下实现的界面效果。当你点击“增加”按钮时，会动态生成一个新的用户名和密码输入框，并附有删除按钮。每一个输入框都可以通过点击删除按钮来移除。这是如何做到的呢？下面我们来一竟。

在Angular的组件中，我们定义了一个名为`login`的数组来存储表单的数据。每一个元素都是一个包含用户名和密码的对象。我们还有两个按钮：“增加”和“双击”。点击“增加”按钮会触发`addInput`方法，向`login`数组中添加一个新的对象；点击“双击”按钮则会触发一个名为`dbclick`的方法（虽然这个方法在提供的代码片段中并未实现任何功能）。

HTML模板部分使用了Angular的`ngFor`指令来遍历`login`数组，并为每一个元素生成一个包含用户名和密码的输入框，以及一个删除按钮。当点击删除按钮时，会触发`removeInput`方法，从数组中删除对应的元素。

具体的代码实现如下：

HTML模板部分：

```html

动态添加表单

```

组件部分：

```typescript

export class YourComponent {

username: any;

id: number = 1;

login: any = [{"username": "username" + this.id, "password": "pwd" + this.id}];

addInput() {

console.log('点击');

console.log(this.login);

let number = this.login.length + 1;

this.login.push({"username": "username" + number, "password": "pwd" + number});

console.log(this.login);

}

removeInput(item) {

console.log(item);

let i = this.logindexOf(item);

console.log(i);

this.login.splice(i, 1);

}

}

```

这就是如何使用Angular4实现动态添加和删除表单输入框的功能。希望通过这个示例能够帮助到大家，如果有任何疑问或者需要进一步的解释，请随时向我提问。感谢大家对于狼蚁SEO的支持和关注！