有没有一种方法可以根据表单提交的内容在角度材料选项卡之间进行切换？

<form id="myForm">
  <!-- 表单内容 -->
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  
  <!-- 选项卡导航栏 -->
  <ul id="tabNav">
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
  </ul>
  
  <!-- 选项卡内容区域 -->
  <div id="tabContent">
    <div class="tabPane active">选项卡1的内容</div>
    <div class="tabPane">选项卡2的内容</div>
    <div class="tabPane">选项卡3的内容</div>
  </div>
  
  <button type="submit">提交</button>
</form>

/* 选项卡导航栏样式 */
#tabNav {
  list-style: none;
  padding: 0;
  margin: 0;
}

#tabNav li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

#tabNav li.active {
  background-color: #f00;
}

/* 选项卡内容区域样式 */
#tabContent .tabPane {
  display: none;
}

#tabContent .active {
  display: block;
}

// 监听表单提交事件
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  // 获取表单的内容
  var formData = new FormData(event.target);
  var name = formData.get('name');
  var email = formData.get('email');
  
  // 根据表单内容切换选项卡
  var tabPanes = document.getElementsByClassName('tabPane');
  for (var i = 0; i < tabPanes.length; i++) {
    tabPanes[i].classList.remove('active');
  }
  
  if (name === '选项卡1') {
    tabPanes[0].classList.add('active');
  } else if (name === '选项卡2') {
    tabPanes[1].classList.add('active');
  } else if (name === '选项卡3') {
    tabPanes[2].classList.add('active');
  }
});