

下のarrayAは本来DBから取得しますが、取得したデータはtextとflagを持ったオブジェクトの配列です。

まずお聞きしたいのは画面初期表示時にデータをセットしたいのですが、formGroupの'attributes'に配列データをセットして、その配列の要素のtextをhtmlのinputフィールドに出したいのですがうまく動いてくれません。
このイテレートしているattributeのtextをinputフィールドのformControlNameにflagをmat-slide-
toggleのformControlNameにセットしたいのですがご教授お願いします。

また追加ボタンを押すと画面にぽこっと下のhtmlがもう一個追加されて入力フィールドが出てくるんですが、新しく追加したフィールドに入力したものもDBに登録できるような仕組みを考えています。

どうぞ、お知恵をおかし願います。

⬇︎⬇︎⬇︎以下 tsファイルの中⬇︎⬇︎⬇︎  
arrayA = [{text: 'ABC', flag: true}, {text: 'DEF', flag: false}, {text: 'HIJ',
flag: true}];

[code]

    constructor(private fb: FormBuilder){}
    
    ngOnInit() {
      this.form = this.fb.group({
        'attributes': this.fb.array(arrayA)
      });
    }
    
    addAttribute() {
      const control = new FormControl(null);
      (<FormArray>this.form.get('ja_attributes')).push(control);
    }
    
    
    ⬇︎⬇︎⬇︎ htmlの中身 ⬇︎⬇︎⬇︎
    <div formArrayName="attributes">
      <div fxLayout *ngFor="let attribute of form.get('attributes').controls; let i = index">
        <div fxFlex="80%">
          <section>
            <mat-form-field class="inputfields">
              <input type="text" class="form-control" matInput placeholder="other" [formControlName]="attribute.text">
            </mat-form-field>
          </section>
        </div>
        <div fxFlex="20%">
          <mat-slide-toggle [formControlName]="attribute.flag"></mat-slide-toggle>
        </div>
      </div>
    </div>
    <div>
      <button type="button" class="btn btn-primary btn-sm" (click)="addAttribute()">追加</button>
    </div>
    
[/code]


CC BY-SA 3.0
2018-04-05T08:37:10.533
42957
2018-04-05T08:37:10.533
15499
question
angular4 angular2 angular-material
angular5のFormArrayの使い方について