fix: translate forms guides

adev-ja/src/content/guide/forms/dynamic-forms.en.md

@@ -0,0 +1,143 @@
+# Building dynamic forms
+
+Many forms, such as questionnaires, can be very similar to one another in format and intent.
+To make it faster and easier to generate different versions of such a form, you can create a _dynamic form template_ based on metadata that describes the business object model.
+Then, use the template to generate new forms automatically, according to changes in the data model.
+
+The technique is particularly useful when you have a type of form whose content must change frequently to meet rapidly changing business and regulatory requirements.
+A typical use-case is a questionnaire.
+You might need to get input from users in different contexts.
+The format and style of the forms a user sees should remain constant, while the actual questions you need to ask vary with the context.
+
+In this tutorial you will build a dynamic form that presents a basic questionnaire.
+You build an online application for heroes seeking employment.
+The agency is constantly tinkering with the application process, but by using the dynamic form
+you can create the new forms on the fly without changing the application code.
+
+The tutorial walks you through the following steps.
+
+1. Enable reactive forms for a project.
+1. Establish a data model to represent form controls.
+1. Populate the model with sample data.
+1. Develop a component to create form controls dynamically.
+
+The form you create uses input validation and styling to improve the user experience.
+It has a Submit button that is only enabled when all user input is valid, and flags invalid input with color coding and error messages.
+
+The basic version can evolve to support a richer variety of questions, more graceful rendering, and superior user experience.
+
+## Enable reactive forms for your project
+
+Dynamic forms are based on reactive forms.
+
+To give the application access reactive forms directives, import `ReactiveFormsModule` from the `@angular/forms` library into the necessary components.
+
+The following code from the example shows the setup in the root module.
+
+<docs-code-multifile>
+    <docs-code header="dynamic-form.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts"/>
+    <docs-code header="dynamic-form-question.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts"/>
+</docs-code-multifile>
+
+## Create a form object model
+
+A dynamic form requires an object model that can describe all scenarios needed by the form functionality.
+The example hero-application form is a set of questions — that is, each control in the form must ask a question and accept an answer.
+
+The data model for this type of form must represent a question.
+The example includes the `DynamicFormQuestionComponent`, which defines a question as the fundamental object in the model.
+
+The following `QuestionBase` is a base class for a set of controls that can represent the question and its answer in the form.
+
+<docs-code header="src/app/question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
+
+### Define control classes
+
+From this base, the example derives two new classes, `TextboxQuestion` and `DropdownQuestion`, that represent different control types.
+When you create the form template in the next step, you instantiate these specific question types in order to render the appropriate controls dynamically.
+
+The `TextboxQuestion` control type is represented in a form template using an `<input>` element. It presents a question and lets users enter input. The `type` attribute of the element is defined based on the `type` field specified in the `options` argument (for example `text`, `email`, `url`).
+
+<docs-code header="question-textbox.ts" path="adev/src/content/examples/dynamic-form/src/app/question-textbox.ts"/>
+
+The `DropdownQuestion` control type presents a list of choices in a select box.
+
+ <docs-code header="question-dropdown.ts" path="adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts"/>
+
+### Compose form groups
+
+A dynamic form uses a service to create grouped sets of input controls, based on the form model.
+The following `QuestionControlService` collects a set of `FormGroup` instances that consume the metadata from the question model.
+You can specify default values and validation rules.
+
+<docs-code header="src/app/question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
+
+## Compose dynamic form contents
+
+The dynamic form itself is represented by a container component, which you add in a later step.
+Each question is represented in the form component's template by an `<app-question>` tag, which matches an instance of `DynamicFormQuestionComponent`.
+
+The `DynamicFormQuestionComponent` is responsible for rendering the details of an individual question based on values in the data-bound question object.
+The form relies on a [`[formGroup]` directive](api/forms/FormGroupDirective "API reference") to connect the template HTML to the underlying control objects.
+The `DynamicFormQuestionComponent` creates form groups and populates them with controls defined in the question model, specifying display and validation rules.
+
+<docs-code-multifile>
+  <docs-code header="dynamic-form-question.component.html" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.html"/>
+  <docs-code header="dynamic-form-question.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts"/>
+</docs-code-multifile>
+
+The goal of the `DynamicFormQuestionComponent` is to present question types defined in your model.
+You only have two types of questions at this point but you can imagine many more.
+The `ngSwitch` statement in the template determines which type of question to display.
+The switch uses directives with the [`formControlName`](api/forms/FormControlName "FormControlName directive API reference") and [`formGroup`](api/forms/FormGroupDirective "FormGroupDirective API reference") selectors.
+Both directives are defined in `ReactiveFormsModule`.
+
+### Supply data
+
+Another service is needed to supply a specific set of questions from which to build an individual form.
+For this exercise you create the `QuestionService` to supply this array of questions from the hard-coded sample data.
+In a real-world app, the service might fetch data from a backend system.
+The key point, however, is that you control the hero job-application questions entirely through the objects returned from `QuestionService`.
+To maintain the questionnaire as requirements change, you only need to add, update, and remove objects from the `questions` array.
+
+The `QuestionService` supplies a set of questions in the form of an array bound to `@Input()` questions.
+
+<docs-code header="src/app/question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
+
+## Create a dynamic form template
+
+The `DynamicFormComponent` component is the entry point and the main container for the form, which is represented using the `<app-dynamic-form>` in a template.
+
+The `DynamicFormComponent` component presents a list of questions by binding each one to an `<app-question>` element that matches the `DynamicFormQuestionComponent`.
+
+<docs-code-multifile>
+    <docs-code header="dynamic-form.component.html" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html"/>
+    <docs-code header="dynamic-form.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts"/>
+</docs-code-multifile>
+
+### Display the form
+
+To display an instance of the dynamic form, the `AppComponent` shell template passes the `questions` array returned by the `QuestionService` to the form container component, `<app-dynamic-form>`.
+
+<docs-code header="app.component.ts" path="adev/src/content/examples/dynamic-form/src/app/app.component.ts"/>
+
+This separation of model and data lets you repurpose the components for any type of survey, as long as it's compatible with the _question_ object model.
+
+### Ensuring valid data
+
+The form template uses dynamic data binding of metadata to render the form without making any hardcoded assumptions about specific questions.
+It adds both control metadata and validation criteria dynamically.
+
+To ensure valid input, the _Save_ button is disabled until the form is in a valid state.
+When the form is valid, click _Save_ and the application renders the current form values as JSON.
+
+The following figure shows the final form.
+
+<img alt="Dynamic-Form" src="assets/images/guide/dynamic-form/dynamic-form.png">
+
+## Next steps
+
+<docs-pill-row>
+  <docs-pill title="Validating form input" href="guide/forms/reactive-forms#validating-form-input" />
+  <docs-pill title="Form validation guide" href="guide/forms/form-validation" />
+</docs-pill-row>