角度の使用動的なフォーム

目的は、ダイナミックなフォームを使用することで、手動でちょうど数と動的に設定した後にフォームを生成し、効率を向上させるためのデータの種類によって、多くのHTMLコードを記述する必要はありません。物事のビジネス面の一部が点在公式ウェブサイトは、なじみのない学ぶために人々の難易度が高く、角度でダイナミックなフォルムを導入、ここで直接かつダイナミックなフォームの使用を生成する方法を実証することです。
動的なフォームを使用する場合、それは、そのような制御型などのいくつかの基本的な事柄を、開発する必要性、ビルド関連するコントロールにデータを取得するために、値等必要な入力タイプ、TEXTAREA、またはフォームタイプの他のタイプとすることなどができます。

まず、基本クラスを作成します自分たちのニーズにこれ見ては、いない基本クラスに直接ここにいくつかの設定の公式ウェブサイトをとり、自分の選択であります

//基类
export class BaseControl<T>{
    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 || '';
    }
}

サブコントロールクラスを作成します。

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

//input类，默认文本类型
export class TextBox extends BaseControl<string>{
    controlType = "textbox";
    type: string;
    constructor(options: {} = {}) {
        super(options);
        this.type = options["type"] || "";
    }
}

そして、ビルドコントロール

export class DynamicFromComponent implements OnInit {

  constructor() { }

  form:FormGroup;
  controls:BaseControl<any>[];
  ngOnInit() {
    this.controls=this.createControls();
    this.form=this.toFromGroup(this.controls);
  }
  //构建控件，如果需要放一些默认数据以及其他的验证都在这里进行
  createControls() {
    return [
      new TextArea({
        placeholder: "地方描述，最多120字。",
        rows: 3,
        key:"desc1"
      }),
      new TextArea({
        placeholder: "路线描述，最多120字。",
        rows: 3,
        key:"desc2"
      }),
      new TextBox({
        placeholder: "用户名",
        value:"张三",
        key:"userName"
      })
    ]
  }
  //循环控件加到formgroup上
  toFromGroup(controls:BaseControl<any>[]){
    let group: any = {};
    controls.forEach(item => {
      //这个是要绑到formControlName上的值，如果都不设置具体名称的话，
      //最后提交拿到只有最后改变的那个控件的值，我这写的和官网上的不一样
      //我这里是一种投机行为
      group[item.key] = new FormControl(item.key || "");
    });
    return new FormGroup(group);
  }

  onSubmit(){
  	//这里是提交时获取到的所有表单数据，如果都不填获取的是默认的值
    console.log(this.form.value);
  }

}

受信用

<form (ngSubmit)="onSubmit()" [formGroup]="form">
  <div *ngFor="let item of controls">
    <div [ngSwitch]="item.controlType">
      <!--通过判断类型来显示哪种表单-->
      <input *ngSwitchCase="'textbox'" [type]="item.type" value="{{item.value}}" [formControlName]="item.key"
        placeholder="{{item.placeholder}}">
      <textarea *ngSwitchCase="'textarea'" value="{{item.value}}" rows="{{item.rows}}" [formControlName]="item.key"
        placeholder="{{item.placeholder}}"></textarea>
    </div>
  </div>
  <button type="submit">保存</button>
</form>

結果