angular5のFormArrayの使い方について

下の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}];

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>