更新 html formArray 中的值 angular

Question

I try to change value in html, i have this formArray:

first formArray.value:

(3) [{…}, {…}, {…}]
0: {id: 14, start_time: "16:00", end_time: "16:51", name: "Berytech BDD 1294"}
1: {id: 17, start_time: "16:59", end_time: "17:01", name: "Sultan Ibrahim"}
2: {id: 16, start_time: "17:04", end_time: "17:30", name: "SaintGeorge"}
length: 3
__proto__: Array(0)

after some function formArray change:

(3) [{…}, {…}, {…}]
0: {id: 17, start_time: "16:03", end_time: "16:51", name: "Berytech BDD 1294"}
1: {id: 14, start_time: "16:52", end_time: "17:01", name: "Sultan Ibrahim"}
2: {id: 16, start_time: "17:13", end_time: "17:57", name: "SaintGeorge"}
length: 3
__proto__: Array(0)

Fine with data change but, i have a form input for start time:

    <div class="example-box"
     *ngFor="let item of locationFormArray.controls; let pointIndex=index"
     [formGroupName]="pointIndex" cdkDrag [cdkDragDisabled]="pointIndex == 0">

      <div class="col-lg-4 col-md-4">
        <div class="input-group form-group">
          <input type="time" style="width: 100% !important;"
             class="form-control" disabled  required formControlName="start_time">
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">Start Time</span>
          </div>
        </div>
      </div>
    </div>

How to change value in html input while formArray changed?

After some search i found patchValue what do?

Resume:

formArray with input for start time:

start time 1
start time 2
start time 3

After change i have new formArray i want to change html input:

new start time 1 
new start time 2 
new start time 3

Answer 1

I tested the following code and got the correct answer.

app.component.html:

<form [formGroup]="formMe">
  <ng-container *ngFor="let item of arrayMe;let i=index">
    <input [formControlName]="i" [placeholder]="'start_time ' + (i+1)"><br>
  </ng-container>

<button (click)="logStatus()">logStatus</button>
</form>

app.omponent.ts:

export class AppComponent implements OnInit {
  formMe = new FormGroup({})
  arrayMe: any[] = [
    { id: 17, start_time: "16:03", end_time: "16:51", name: "Berytech BDD 1294" },
    { id: 14, start_time: "16:52", end_time: "17:01", name: "Sultan Ibrahim" },
    { id: 16, start_time: "17:13", end_time: "17:57", name: "SaintGeorge" },
  ]
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    for (let i = 0; i < this.arrayMe.length; i++) {
      const a: string = String(i);
      this.formMe.addControl(a, new FormControl('', Validators.required));
    }
  }
  logStatus() {
    for (let i = 0; i < this.arrayMe.length; i++) {
      this.arrayMe[i].start_time = this.formMe.get(String(i)).value;
    }

    console.log(this.arrayMe);

  }
}