如何在Angular 7中点击按钮时添加表单元素

<button (click)="addFormField()">添加表单元素</button>
<form>
  <div #formContainer></div>
</form>

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('formContainer', { read: ViewContainerRef }) formContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  addFormField() {
    // 创建表单元素组件的工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourFormFieldComponent);

    // 创建表单元素组件实例
    const componentRef = this.formContainer.createComponent(componentFactory);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-form-field',
  template: `
    <div>
      <!-- 表单元素的HTML代码 -->
    </div>
  `,
  styleUrls: ['./your-form-field.component.css']
})
export class YourFormFieldComponent {
  // 表单元素的逻辑代码
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { YourComponent } from './your-component.component';
import { YourFormFieldComponent } from './your-form-field.component';

@NgModule({
  declarations: [
    YourComponent,
    YourFormFieldComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [YourFormFieldComponent], // 添加到entryComponents数组中
  providers: [],
  bootstrap: [YourComponent]
})
export class AppModule { }