如何在Angular表单中添加动态字段，实现用户自定义键值对录入？

你可以通过维护一个动态数组存储用户输入的键值对，实现不限数量的字段新增/删除功能，最终提交结构化数据给后端生成properties文件即可，完整实现逻辑如下：

前端实现逻辑 #

• 初始化一个空数组kvList，默认添加1组空的键值对项供用户初始填写
• 点击「新增字段」按钮时，向kvList尾部追加{key: '', value: ''}结构的空项，页面自动渲染新增的两个输入框
• 每行字段绑定删除按钮，点击时移除kvList中对应下标的项
• 表单提交前做校验：过滤掉key为空的无效项，避免生成无效的properties配置
• 提交时将处理后的数组转换为{key1: value1, key2: value2}格式的对象传给后端接口

以下是基于原生JS的极简实现代码示例：

<div id="formContainer">
  <button id="addBtn">新增配置项</button>
  <div id="kvList"></div>
  <button id="submitBtn">提交生成配置</button>
</div>

<script>
const kvList = document.getElementById('kvList')
let kvCount = 1

// 初始化第一组输入框
addKvItem()

// 新增键值对行
document.getElementById('addBtn').addEventListener('click', addKvItem)
function addKvItem() {
  const item = document.createElement('div')
  item.className = 'kv-item'
  item.dataset.index = kvCount
  item.innerHTML = `
    <input type="text" class="kv-key" placeholder="配置键（key）" />
    <input type="text" class="kv-value" placeholder="配置值（value）" />
    <button class="delBtn">删除</button>
  `
  kvList.appendChild(item)
  kvCount++
  // 绑定删除事件
  item.querySelector('.delBtn').addEventListener('click', () => item.remove())
}

// 提交处理
document.getElementById('submitBtn').addEventListener('click', () => {
  const config = {}
  const items = document.querySelectorAll('.kv-item')
  items.forEach(item => {
    const key = item.querySelector('.kv-key').value.trim()
    const value = item.querySelector('.kv-value').value.trim()
    if (key) config[key] = value
  })
  // 此处调用后端接口提交config对象即可
  console.log('提交的配置：', config)
})
</script>

你要实现的表单效果参考下图：

后端生成properties文件逻辑 #

拿到前端提交的键值对对象后，按properties文件格式逐行拼接即可，以下是Java后端的实现示例：

import java.io.FileWriter;
import java.io.IOException;
import java.util.Map;
import java.util.Properties;

public class PropGenerator {
    public void generatePropFile(Map<String, String> config, String filePath) throws IOException {
        Properties properties = new Properties();
        // 把前端传的键值对全部放入properties对象
        for (Map.Entry<String, String> entry : config.entrySet()) {
            properties.setProperty(entry.getKey(), entry.getValue());
        }
        // 写入到指定路径的properties文件
        try (FileWriter writer = new FileWriter(filePath)) {
            properties.store(writer, "自动生成的配置文件");
        }
    }
}

如果是Node.js后端可以直接拼接字符串写入文件：

const fs = require('fs')

function generatePropFile(config, filePath) {
  const content = Object.entries(config)
    .map(([key, value]) => `${key}=${value}`)
    .join('\n')
  fs.writeFileSync(filePath, '# 自动生成的配置文件\n' + content)
}

内容的提问来源于stack exchange，提问作者Amar