anchor.diff:  include ../_util-fns
   
   :marked
  -   We can't always justify the cost and time to build handcrafted forms, 
  -   especially if we'll need a great number of them, they're similar to each other, and they change frequently 
  -   to meet rapidly changing business and regulatory requirements.
  -   
  -   我们不可能一直觉得手动编写表单和需要的工作量和时间成正比，特别是当我们需要编写大量的表单，它们非常类似，而且它们需要随着商务和政策需求的迅速变化而变化。
  +   We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
  +   
  +   有时候手动编写和维护表单需要工作量和时间过多。特别是需要编写大量的表单时，表单都非常类似，而且随着商务和政策需求的迅速变化，表单也需要随之变化，维护成本过高。
      
      It may be more economical to create the forms dynamically, based on metadata that describe the business object model.
      
  -   基于商务对象模型里面的元数据，动态建立表单可能更加划算。
  +   基于商务对象模型元数据，动态建立表单可能更加划算。
      
      In this cookbook we show how to use `ngFormModel` to dynamically render a simple form with different control types and validation.
      It's a primitive start. 
      It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience.
      All such greatness has humble beginnings.
     
  -   在本文中，我们会展示怎么利用`ngFormModel`动态渲染一个简单的表单， 包含不同类型控制器和验证规则。
  -   这是一个原始的开始，任何伟大都是从谦卑开始的。我们可以在这个基础上添加种类丰富的问卷问题，更加优美的渲染和更优越的用户体验。
  +   在本食谱中，我们会展示如何利用`ngFormModel`来动态渲染一个简单的表单，包括多种类型控制器和验证规则。
  +   这只是一个初级的开始，但是任何伟大都是从谦卑开始的。我们可以在这个基础上添加种类丰富的问卷问题，更加优美的渲染和更加优越的用户体验。
      
      In our example we use a dynamic form to build an online application experience for heroes seeking employment.
      The agency is constantly tinkering with the application process.
      We can create the forms on the fly *without changing our application code*.
      
  -   在这个例子中，我们使用动态表单，为正在找工作的英雄们创建一个在线申请体验。中介在不断的修改申请流程。我们可以在*不修改程序*的情况下，动态即时的建立一个表格 
  +   在本例中，我们使用动态表单，为正在找工作的英雄们创建一个在线申请问卷表。职业中介在不断的修改申请流程。我们可以在*不修改程序*的情况下，动态建立一个表格。
      
   <a id="toc"></a>
   :marked
      ## Table of contents
      ## 目录  
  -      [问卷问题模型Question Model](#object-model)
  -      
  -      [表单组件Form Component](#form-component)
  -
  -      [问卷元数据Questionnaire Metadata](#questionnaire-metadata)
  -      
  -      [动态模板Dynamic Template](#dynamic-template)
  +      [Question Model](#object-model)
  +      
  +      [问卷问题模型](#object-model)
  +      
  +      [Form Component](#form-component)
  +      
  +      [表单组件](#form-component)
  +
  +      [Questionnaire Metadata](#questionnaire-metadata)
  +      
  +      [问卷元数据](#questionnaire-metadata)
  +      
  +      [Dynamic Template](#dynamic-template)
  +      
  +      [动态模板](#dynamic-template)
   
   :marked
      **See the [live example](/resources/live-examples/cb-dynamic-form/ts/plnkr.html)**.
  
positive.code:    Next we have defined `QuestionControlService`, a simple service for transforming our questions to an ngForm control group. 
     In a nutshell, the control group consumes the metadata from the question model and allows us to specify default values and validation rules.
     
     下一步，我们定义了`QuestionControlService`，一个可以把我们的问卷问题转换为ngForm控制组的服务。简而言之，这个ngForm控制组使用问卷模型的元数据，允许我们制定默认值和验证规则。
  +makeExample('cb-dynamic-form/ts/app/question-control.service.ts',null,'app/question-control.service.ts')(format='.')
  
  <a id="form-component"></a>
  
negative.code:    without making any hardcoded assumptions about specific questions. 
     In addition to control metadata, we are also adding validation dynamically.
     
     这点非常重要，因为只要与我们的*问卷*对象模型兼容，我们可以为任何类型的调查问卷重复使用这些组件。
     关键是运用动态数据绑定的元数据来渲染表单，不对问卷问题有任何硬性的假设。除了控制器元数据外，我们还可以动态添加验证规则。
  
     The *Save* button is disabled until the form is in a valid state. 
     When the form is valid, we can click *Save* and the app renders the current form values as JSON. 
     This proves that any user input is bound back to the data model.
     Saving and retrieving the data is an exercise for another time.
     
     在表单的验证通过之前，*保存*按钮是禁用的。当表单验证通过后，我们可以点击*保存*，程序会把当前的值渲染成为Json。
     它证明了任何用户输入都会被传到了数据模型里。如何储存和提取数据是另一话题。
  
  :marked
     The final form looks like this:
     
     完整表单看起来是这样：
     
  figure.image-display
     img(src="/resources/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form")
  
  