在 angular 中更新 html formArray 中的值

Question

我尝试更改 html 中的值，我有这个 formArray:

首先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)

一些函数 formArray 更改后：

(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)

数据更改没问题，但是我有一个开始时间的表单输入：

    <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>

如何在 formArray 更改时更改 html 输入中的值？

经过一番搜索，我发现 patchValue 怎么办？

简历：

带有开始时间输入的 formArray：

start time 1
start time 2
start time 3

更改后我有新的 formArray 我想更改 html 输入：

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

Answer 1

我测试了以下代码并得到了正确答案。

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);

  }
}

在 angular 中更新 html formArray 中的值

Update value in html formArray in angular

angular

angular-reactive-forms