带有Angular 5的URL-Repeater-Field和FormControls的FormArray

Question

我需要表单中的网址列表。一个重复的领域。像这样的东西：

我正在使用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是拼写错误）

由于我们正在处理单个formcontrols，我们可以使用迭代的索引值来引用表单控件，因此只需为您的输入添加[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>

StackBlitz