本文共 3276 字，大约阅读时间需要 10 分钟。

���Angular������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������Angular������������������������

������������

���������������������������������BaseControl������������������������������������������������������������������������������������������������������������������������������������������

export class BaseControl {  value: T;  key: string;  label: string;  required: boolean;  order: number;  controlType: string;  placeholder: string;  constructor(    options: {      value?: T;      key?: string;      label?: string;      required?: boolean;      order?: number;      controlType?: string;      placeholder?: string    } = {}  ) {    this.value = options.value;    this.key = options.key || '';    this.label = options.label || '';    this.required = !!options.required;    this.order = options.order === undefined ? 1 : options.order;    this.controlType = options.controlType || '';    this.placeholder = options.placeholder || '';  }}

������������������������������������������������������������������������BaseControl���������������������������������

���������������

������������������������������������������������������TextBox���TextArea���������������������������������������

export class TextBox extends BaseControl
   
     {  controlType = 'textbox';  type: string;  constructor(options: {} = {}) {    super(options);    this.type = options['type'] || '';  }}
   

export class TextArea extends BaseControl
   
     {  controlType = 'textarea';  rows: number;  constructor(options: {} = {}) {    super(options);    this.rows = options['rows'] || 1;  }}
   

������������������

������������������������������������������������������������������������������������������������

export class DynamicFormComponent implements OnInit {  form: FormGroup;  controls: BaseControl
   
    [] = [];  constructor() {}  ngOnInit() {    this.controls = this.createControls();    this.form = this.toFormGroup(this.controls);  }  private createControls(): BaseControl
    
     [] {    return [      new TextArea({        placeholder: '���������������������120������',        rows: 3,        key: 'desc1'      }),      new TextArea({        placeholder: '���������������������120������',        rows: 3,        key: 'desc2'      }),      new TextBox({        placeholder: '���������',        value: '������',        key: 'userName'      })    ];  }  private toFormGroup(controls: BaseControl
     
      []): FormGroup {    const group: any = {};    controls.forEach(item => {      group[item.key] = new FormControl(item.key || '');    });    return new FormGroup(group);  }}
     
    
   

���������������������

������������������������������������������������������������������������������������������������

   
  
    
    
     
      
            
          
     
  
    
  
    ������
   

������������

���������������������������������������������������������������������������������������

onSubmit() {  console.log(this.form.value);}

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������