• 嵌套表单数据
    • ngModelGroup

    嵌套表单数据

    如果你发现你在把一维的表单替换成嵌套的数据上遇到了麻烦，不用怕，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进行验证。