角度の反応形式を使用してtypescriptクラスとオブジェクトを使用してフォーム要素を生成する方法

Question

私は次のようなクラスファイルを持っています。

export class ClassA { 
    description: string; 
    type: string; 
    order: number; 
    constructor(descrption: string, type: string, order: number) { 
     this.description = descrption; 
     this.type = type; 
     this.order = order; 
    } 
} 

ここで、このクラスをタイプスクリプトで使用してフォーム要素（テキストボックス）を作成します。私のhtmlページで コードすなわち（.TS）私のtypescriptファイルで

<form [formGroup]="myForm"> 

</form> 

を次のようなコードをファイルは次のようです。

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    title = 'app'; 
    arr = Array<ClassA>(); 
    r1: ClassA; 
    r2: ClassA; 
    myForm:FormGroup; 
    constructor() { 
    this.r1 = new ClassA('description1', 'text', 1); 
    this.arr.push(this.r1); 
    this.r2 = new ClassA('description2', 'text', 2); 
    this.arr.push(this.r2); 
    } 
    ngOnInit() { 
    console.log(this.arr); 
    } 
} 

このformGroupを使用すると、これらのクラスフィールドをフォームの入力要素として動的に作成する方法はありますか？

Answer 1

コンポーネントを作成し、入力としてオブジェクトを取得するだけです。

Object.keys(obj); 

上記のコードは、オブジェクトのすべてのキーを提供します。 FormGroupを作成し、FormControlを追加します。テンプレートでは、入力をレンダリングするためにngforを使用します。

次のコードを使用：

import { Component, Input } from '@angular/core'; 
import { FormGroup, FormBuilder, FormControl } from "@angular/forms"; 

@Component({ 
    selector: 'app-form', 
    template: ` 
    <form [formGroup]="myForm"> 
     <div *ngFor="let formKey of objKeys"> 
     <input type="text" formControlName="{{formKey}}" /> 
     </div> 

     {{myForm.value | json}} 
    </form> 
    `, 
}) 
export class FormComponent { 
    public myForm: FormGroup; 
    public myObj = { 
    firstName: "", 
    lastName: "" 
    }; 
    public objKeys: string[] = []; 
    constructor(private fb: FormBuilder) { 
    this.objKeys = Object.keys(this.myObj); 
    console.log(this.objKeys); 
    this.myForm = fb.group({}); 
    Object.keys(this.myObj).forEach(key => { 
    this.myForm.addControl(key, new FormControl(this.myObj[key]));  
    }) 
    } 
} 

はあなたがクラスを持っていると、フォームのビルドがどのように見えるべきかを知っているので、私はそれを使用したい、それは私がどうなるのか

Answer 2

を助けることを願っていますFormArrayにformgroupsをプッシュするため、最初、フォームを構築するあなたの配列を反復処理して配列に各オブジェクトをプッシュするformGroup：

constructor(private fb: FormBuilder) { 
    this.myForm = this.fb.group({ 
    formArray: this.fb.array([]) 
    }); 
    this.r1 = new ClassA('description1', 'text', 1); 
    this.arr.push(this.r1); 
    this.r2 = new ClassA('description2', 'text', 2); 
    this.arr.push(this.r2); 

    this.arr.forEach(x => { 
    let formArr = this.myForm.controls.formArray as FormArray; 
    this.arr.forEach(x => { 
     formArr.push(this.fb.group({ 
     description: [x.description], 
     type: [x.type], 
     order: [x.order] 
     })) 
    }) 
    }) 
} 

あなたがクラスClassAの新しいオブジェクトをプッシュする場合、あなたは好きなことを行うことができます。

formArr.push(this.fb.group(new ClassA('desc3','type3',3))) 

次にテンプレートでちょうどこのフォームの配列を反復：

<form [formGroup]="myForm"> 
    <div formArrayName="formArr"> 
    <div *ngFor="let item of myForm.get('formArr').controls; let i = index" [formGroupName]="i"> 
     <input formControlName="description" /> 
     <input formControlName="type" /> 
     <input formControlName="order" /> 
    </div> 
    </div> 
</form> 

うまくいけば、これはあなたが何かあります探している！ :)

StackBlitz