Angular新手求教：如何获取多联系方式表单的指定格式数据

嗨，刚接触Angular遇到这种表单数据处理的问题太正常了！我来一步步帮你实现你想要的功能——从Bootstrap表单里收集数据，点击保存后生成你指定格式的contactInfo数组。

第一步：先做好表单与数据的双向绑定 #

Angular的核心就是双向绑定，我们先在控制器里初始化一个临时数组tempContacts，用来绑定表单里的每一项输入。这样用户在表单里输入的内容会自动同步到这个数组里，不用手动去DOM里取值~

控制器里的初始化代码 #

angular.module('contactApp', [])
.controller('ContactController', function($scope) {
  // 初始化临时联系人数组，每个联系人包含姓名、手机号数组、邮箱数组
  $scope.tempContacts = [
    { name: '', mobile: [''], email: [''] } // 默认加载一个联系人项
  ];

  // 添加新的联系人
  $scope.addContact = function() {
    $scope.tempContacts.push({ name: '', mobile: [''], email: [''] });
  };

  // 给指定联系人添加手机号输入框
  $scope.addMobile = function(contact) {
    contact.mobile.push('');
  };

  // 给指定联系人添加邮箱输入框
  $scope.addEmail = function(contact) {
    contact.email.push('');
  };

  // 删除指定联系人的某个手机号
  $scope.removeMobile = function(contact, index) {
    contact.mobile.splice(index, 1);
  };

  // 删除指定联系人的某个邮箱
  $scope.removeEmail = function(contact, index) {
    contact.email.splice(index, 1);
  };
});

对应的Bootstrap表单结构 #

把表单和上面的tempContacts绑定起来，用ng-repeat循环渲染每个联系人项：

<div ng-app="contactApp" ng-controller="ContactController" class="container mt-4">
  <!-- 循环渲染每个联系人 -->
  <div ng-repeat="contact in tempContacts track by $index" class="card mb-3">
    <div class="card-body">
      <h5 class="card-title">联系人 {{$index + 1}}</h5>
      
      <!-- 姓名输入 -->
      <div class="mb-3">
        <label class="form-label">姓名</label>
        <input type="text" class="form-control" ng-model="contact.name" placeholder="请输入姓名">
      </div>
      
      <!-- 手机号列表 -->
      <div class="mb-3">
        <label class="form-label">手机号</label>
        <div ng-repeat="mobile in contact.mobile track by $index" class="input-group mb-2">
          <input type="text" class="form-control" ng-model="contact.mobile[$index]" placeholder="请输入手机号">
          <!-- 至少有一个手机号时才显示删除按钮 -->
          <button class="btn btn-danger" ng-click="removeMobile(contact, $index)" ng-if="contact.mobile.length > 1">删除</button>
        </div>
        <button class="btn btn-secondary" ng-click="addMobile(contact)">添加手机号</button>
      </div>
      
      <!-- 邮箱列表 -->
      <div class="mb-3">
        <label class="form-label">邮箱</label>
        <div ng-repeat="email in contact.email track by $index" class="input-group mb-2">
          <input type="email" class="form-control" ng-model="contact.email[$index]" placeholder="请输入邮箱">
          <!-- 至少有一个邮箱时才显示删除按钮 -->
          <button class="btn btn-danger" ng-click="removeEmail(contact, $index)" ng-if="contact.email.length > 1">删除</button>
        </div>
        <button class="btn btn-secondary" ng-click="addEmail(contact)">添加邮箱</button>
      </div>
      
      <!-- 至少有一个联系人时才显示删除按钮 -->
      <button class="btn btn-danger" ng-click="tempContacts.splice($index, 1)" ng-if="tempContacts.length > 1">删除联系人</button>
    </div>
  </div>
  
  <button class="btn btn-primary mb-3" ng-click="addContact()">添加新联系人</button>
  <button class="btn btn-success" ng-click="save()">保存</button>
</div>

第二步：实现save函数，转换为你想要的格式 #

现在表单的数据已经自动存在tempContacts里了，我们只需要在save函数里对这些数据做一些整理——过滤空值、把单个邮箱转换成字符串，就能得到你指定的格式啦！

完善后的控制器代码（加上save函数） #

angular.module('contactApp', [])
.controller('ContactController', function($scope) {
  // 上面的初始化代码不变...

  $scope.save = function() {
    // 遍历临时数组，转换格式
    $scope.contactInfo = $scope.tempContacts.map(contact => {
      // 过滤掉手机号里的空输入
      const validMobiles = contact.mobile.filter(mobile => mobile.trim() !== '');
      // 过滤掉邮箱里的空输入
      const validEmails = contact.email.filter(email => email.trim() !== '');

      return {
        name: contact.name.trim(),
        mobile: validMobiles, // 始终保持数组格式
        // 邮箱如果只有一个有效项，存字符串；多个就存数组
        email: validEmails.length === 1 ? validEmails[0] : validEmails
      };
    }).filter(contact => contact.name.trim() !== ''); // 过滤掉没填姓名的无效联系人
  };
});

一些小细节说明 #

• 用track by $index是为了避免ng-repeat遇到重复空值时报错；
• 过滤空值是为了避免生成的数组里出现空字符串的手机号或邮箱；
• 确保mobile始终是数组，哪怕没有输入手机号也是空数组，符合你给出的示例格式；
• 邮箱会根据数量自动切换为字符串或数组，完全匹配你想要的输出格式。

现在点击保存按钮，$scope.contactInfo就会变成你期望的样子啦！

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