angular learning: How to create a dynamic form

Preparation

Create a new project using ng new async-form, introduce the ReactiveFormsModule module in it and import it in the root module

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
 imports: [
  ReactiveFormsModule
 ]
})

Building the base class for form elements

export class QuestionBase&lt;T&gt; {
  value: T;//The value of the form element  key: string;//The name of the form element key  label: string;//Enter the title of the element  required: boolean;//Does it be necessary to lose  order: number;//Sort  controlType: string;//Form type Select box/Text input box
  constructor(options: {
    value?: T,
    key?: string,
    label?: string,
    required?: boolean,
    order?: number,
    controlType?: string
  } = {}) {
     = ;
     =  || '';
     =  || '';
     = !!;
     =  === undefined ? 1 : ;
     =  || '';
  }
}

Base class that inherits form elements

The data type of the selection box element inherits the base class, set controlType to 'dropdown' and adds a new attribute options array

import { QuestionBase } from './question-base';

export class QuestionDropdown extends QuestionBase<string>{
  controlType = "dropdown";
  options: { key: string, value: string }[] = [];

  constructor(options: {} = {}) {
    super(options);
     = options["options"] || [];
  }
}

The data type of the text input box element inherits the base class, sets the controlType to 'textbox', adds a type attribute, and defines the input type

import { QuestionBase } from './question-base';

export class QuestionTextbox extends QuestionBase<string> {
  controlType = "textbox";
  type:string;
  constructor(options:{} ={}){
    super(options);
     = options["type"]||""
  }
}

Generate data

Generate the data of the form based on the derived class of the form element. A service class can be introduced to provide form data.

 getQuestions(){
  let questions:QuestionBase<any>[]=[
   new QuestionDropdown({
    key:'brave',
    label:'Bravery Rating',
    options:[
     {key:'solid',value:'Solid'},
     {key:'great',value:'Great'},
     {key:'good',value:'Good'},
     {key:'unproven',value:'Unproven'}
    ],
    order:3
   }),
   new QuestionTextbox({
    key:'firstName',
    label:'First name',
    value:"Bombasto",
    required:true,
    order:1
   }),
   new QuestionTextbox({
    key:'emailAddress',
    label:"Email",
    type:'email',
    order:2
   })
  ];
  return ((a, b) =>  - );
 }

Convert data to FormControl type

A service class can be provided specifically to convert form data into FormControl type

 toFormGroup(questions: QuestionBase<any>[]) {
  let group: any = {};

  (question => {
   group[] = ?new FormControl(||"",)
   :new FormControl(||"");
  });
  return new FormGroup(group);
 }

At this point, a set of FormControl instances have been completely constructed.

Provide page templates for data

<div [formGroup]="form">
 <label []="">{{}}</label>
 <div [ngSwitch]="">
  <input *ngSwitchCase="'textbox'" [formControlName]= "" 
  [id]="" [type]="">
  <select [id]="" *ngSwitchCase="'dropdown'"
   [formControlName]="">
   <option *ngFor="let opt of " [value]="">
    {{}}
   </option>
  </select>
 </div>
 <div class="errorMessage" *ngIf="!isValid">
  {{}} is required
 </div>
</div>

The form data is bound through the formGroup instruction, the ngSwitch instruction is used to select the generated template, and the formControlName instruction is bound to the corresponding form data key value.

import { Component, OnInit, Input } from '@angular/core';
import {FormGroup} from '@angular/forms';

import {QuestionBase} from '../question-base';

@Component({
 selector: 'app-dynamic-form-question',
 templateUrl: './',
 styleUrls: ['./']
})
export class DynamicFormQuestionComponent implements OnInit {
 @Input() question:QuestionBase<any>;
 @Input() form :FormGroup;
 get isValid(){
  return [].valid;
 }
 constructor() { }

 ngOnInit() {
 }

}

The form component requires two inputs, form and question, form to obtain whether the key value of the corresponding form is successfully verified, and question to render the corresponding form input element. Use the app-dynamic-form-question tag to use components

Reference form components

  <div *ngFor="let question of questions" class="form-row">
   <app-dynamic-form-question [question]="question" [form]="form"></app-dynamic-form-question>
  </div>

After obtaining the questions data, the single form component is rendered through the *ngFor directive.

Finish

At this point, the function of dynamically creating forms is completed. In this way, we only need to build the specified single input box or other form elements at the beginning, and then control the content of the form by changing the data, which is convenient for later maintenance.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.