嵌套表单数据

如果你发现你在把一维的表单替换成嵌套的数据上遇到了麻烦，不用怕，Angular已经涵盖了简单和复杂的情况。

假设你要提交一个类似下面的数据：

  1. {
  2.   "contact": {
  3.     "firstname": "Bob",
  4.     "lastname": "McKenzie",
  5.     "email": "BobAndDoug@GreatWhiteNorth.com",
  6.     "phone": "555-TAKE-OFF"
  7.   },
  8.   "address": {
  9.     "street": "123 Some St",
  10.     "city": "Toronto",
  11.     "region": "ON",
  12.     "country": "CA",
  13.     "code": "H0H 0H0"
  14.   },
  15.   "paymentCard": {
  16.     "provider": "Credit Lending Company Inc",
  17.     "cardholder": "Doug McKenzie",
  18.     "number": "123 456 789 012",
  19.     "verification": "321",
  20.     "expiry": "2020-02"
  21.   }
  22. }

虽然表单是平面和一维的，但从它们构建的数据不是。将您已经提供的数据转换为所需的形状， 这会导致复杂的变换。

更糟的是，在可能在表单输入中遇到命名冲突的情况下，您可能会发现自己为了语义而使用长而笨拙的名称。

  1.  <form>
  2.   <fieldset>
  3.     <legend>Contact</legend>
  5.     <label for="contact_first-name">First Name</label>
  6.     <input type="text" name="contact_first-name" id="contact_first-name">
  8.     <label for="contact_last-name">Last Name</label>
  9.     <input type="text" name="contact_last-name" id="contact_last-name">
  11.     <label for="contact_email">Email</label>
  12.     <input type="email" name="contact_email" id="contact_email">
  14.     <label for="contact_phone">Phone</label>
  15.     <input type="text" name="contact_phone" id="contact_phone">
  16.   </fieldset>
  18.   <!-- ... -->
  20. </form>

表单处理程序必须将该数据转换为API期望的表单。 幸运的是，这是Angular 2有一个解决方案。

ngModelGroup

当在Angular 2中构建模板驱动的表单时，我们可以依靠ngModelGroup指令来实现一个更干净的实现，这样Angular就会将表单字段转换为嵌套数据。

  1. <form #paymentForm="ngForm" (ngSubmit)="purchase(paymentForm)">
  2.   <fieldset ngModelGroup="contact">
  3.     <legend>Contact</legend>
  5.     <label>
  6.       First Name <input type="text" name="firstname" ngModel>
  7.     </label>
  8.     <label>
  9.       Last Name <input type="text" name="lastname" ngModel>
  10.     </label>
  11.     <label>
  12.       Email <input type="email" name="email" ngModel>
  13.     </label>
  14.     <label>
  15.       Phone <input type="text" name="phone" ngModel>
  16.     </label>
  17.   </fieldset>
  19.   <fieldset ngModelGroup="address">
  20.     <!-- ... -->
  21.   </fieldset>
  23.   <fieldset ngModelGroup="paymentCard">
  24.     <!-- ... -->
  25.   </fieldset>
  26. </form>
  • 使用替代HTML5标签格式; ID与ngForm / ngModelparadigm没有关系
  • 除了语义目的，ngModelGroup不必在<fieldset>上使用，它会和放在<div>上一样。

如果我们填写表单，它将以我们需要的API的形式结束，而且仍然可以依靠HTML进行验证。