Angular2とFormBuilderを使用して動的FormControlを反復処理する方法は？

Question

動的に生成されたFormControlでHTML部分を反復しようとしましたが、入力フィールドに[オブジェクトオブジェクト]、[オブジェクトオブジェクト]が表示されます。

データ

： は、私は、次の形式のJSON文字列を取得：

{ 
    "security_groups": { 
     "databaseName1": [{ 
      "destination": "10.0.8.1-10.0.8.255", 
      "ports": "27000-27499", 
      "protocol": "tcp" 
     }, { 
      "destination": "10.0.8.1-10.0.8.255", 
      "ports": "27000-27499", 
      "protocol": "tcp" 
     }], 
     "xyz": [{ 
      "destination": "10.0.8.1-10.0.8.255", 
      "ports": "27000-27499", 
      "protocol": "tcp" 
     }] 
    } 
} 

このJSONは単なる構造に修正はなく、ネーミングにされています。 Database1は別の方法で呼び出すこともできます。キー "security_groups"だけが修正されています。

私は自分のコントローラ次のコードを持っている：

public form: FormGroup; 
    public data: any; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
    this.data = this.dataSet[this.key]; 

    this.form = this._fb.group({}); 
    Object.keys(this.data).forEach(name => { 
     this.form.addControl(name, new FormControl(
     this.data[name], [<any>Validators.required, <any>Validators.minLength(1)] 
    )); 
    }); 

私はコンソールで、今これをチェックすると、私は構造次取得。

FormGroup 
    ... 
    controls: Object 
    databaseName1: FormControl 
    ... 
    _value: Array[2] 
     0: Object 
     destination: "10.0.8.1-10.0.8.255" 
     ports: "27000-27499" 
     protocol: "tcp" 
     __proto__: Object 
     1: Object 
     destination: "10.0.8.1-10.0.8.255" 
     ports: "27000-27499" 
     protocol: "tcp" 
     __proto__: Object 
     ... 
    xyz: FormControl 
    ... 
    _value: Array[2] 
     0: Object 
     destination: "10.0.8.1-10.0.8.255" 
     ports: "27000-27499" 
     protocol: "tcp" 
     __proto__: Object 
     ... 

私はFormControlName = "databaseName1"を持ち、FormControlName = "xyz"を持っています。 このFormControls（databaseName1とxyz）を反復処理して、入力フィールドに名前を入れます。

HTMLコードは、これまで "control.key" の

<form [formGroup]="form" (ngSubmit)="onSave(form)"> 
    <div *ngFor="let control of form.controls | keyVal; let i=index"> 

    control.log(control.key) 

    <input class="form-control" [formControlName]=control.key> 
    </div> 
</form> 

値がコンソールにdatabaseName1とXYZチェックです。 入力フィールドに[object object]、[object object]という値が表示されます。

入力フィールドにFormControlNameを書き込む方法はありますか？

コントローラのフォームを間違って作成する方法はありますか？

ありがとうございました。

Answer 1

をオブジェクトdatabaseName1とxyzにバインドしています。入力には、渡されたプロパティでtoStringを呼び出して返された値が表示されます。したがって、この場合は[object Object]が返されます。

実際に1つのオブジェクトのプロパティにバインドしたいとします。簡単にするために、私は私の例からバリデータを除外します。私はあなたにHTMLを残します。

ngOnInit() { 
    this.data = this.dataSet[this.key]; 

    this.form = this._fb.group({}); 

    let self = this; //multiple fat-arrow functions, so capture this. 
    Object.keys(this.data).forEach(name => { //databaseName1 and xyz 
    let array = self.data[name]; 
    array.forEach(item => { //The objects within the arrays referenced by databaseName1 and xyz. 
     self.form.addControl(name, new FormGroup({ 
     destination: new FormControl(item['destination'], 
     ports: new FormControl(item['ports'], 
     protocol: new FormControl(item['protocol'] 
     })); 
    }); 
    }); 
}