URL-Repeater-Field with Angular 5 和 FormControls 的 FormArray

Question

我需要表单中的 URL 列表。中继场。是这样的：

我正在使用一个 FormGroup，我是这样初始化的：

this.myForm = this.fb.group({
    otherField: ['', Validators.required],
    urls: this.fb.array([
        new FormControl('test'),
        new FormControl('test2')
    ]),
.
.
.
});

一些getter方法：

  private get urls() { return this.myForm .get('urls'); }
  private get otherField() { return this.myForm .get('otherField'); }

在 HTML 一侧，它看起来像这样：

<form [formGroup]="myForm">
  <div class="form-row">
    <div class="col mb-3">
      <input type="text" class="form-control" formControlName="otherField">
    </div>
  </div>
  <div class="form-row">
    <div class="col mb-3" formArrayName="urls">
      <div class="input-group" *ngFor="let item of urls.controls; let i = index" >
        <input type="text" class="form-control" formControlName="???">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button">
            <i class="fas fa-plus"></i>
           </button>
         </div>
       </div>       
     </div>
   </div>
</form>

这已经显示了正确数量的输入（在这个最小的例子中是两个）。但是如何将日期绑定到输入？我可以使用什么作为 formControllName？

Answer 1

（假设 urls2 是错字）

由于我们处理的是单个表单控件，我们可以使用迭代的索引值来引用表单控件，因此只需为您的输入添加[formControlName]="i"：

<div class="col mb-3" formArrayName="urls">
  <div class="input-group" *ngFor="let item of urls.controls; let i = index" >
    <input type="text" class="form-control" [formControlName]="i">
   </div>       
 </div>

URL-Repeater-Field with Angular 5 和 FormControls 的 FormArray

URL-Repeater-Field with Angular 5 and FormArray of FormControls

forms

repeater

angular

formarray

angular5

StackBlitz