angular2：动态添加项目数组的输入

Question

我的系统中有一个User实体。每个用户都有一封邮件电子邮件（此处不相关）和一个alternateEmails属性，这是一个字符串数组（包含更多不太重要的电子邮件）。

我需要创建一个总是显示主电子邮件的表单 - 并且将包含所有备用电子邮件 - 每个备用电子邮件都有1个输入。还有一个按钮add email。 UI中非常标准的界面内容。

这就是我现在所拥有的：

user-form.component.html：

<div class="form-group" *ngFor="let ae of user.alternateEmails; let i = index">
    <label for="alternateEmail{{i}}">alternate email {{i}}:</label>
    <input class="form-control" name="alternateEmail{{i}}" id="alternateEmail{{i}}" placeholder="alternate email" type="text" [(ngModel)]="user.alternateEmails[i]" />
</div>

<button (click)="addAlternateEmailClicked()">add email</button> 

user-form.component.ts：

addAlternateEmailClicked(){
  this.user.alternateEmails.push('');
}

它非常好地显示数据。当我从服务器加载数据时，它反映了用户拥有的备用电子邮件的数量（如果没有，则显示无，如果有2，则显示2），等等：

当我点击add email时，会显示新输入：

疯狂的问题我面临的是当我专注于给定的备用电子邮件（点击输入内部，以便我可以开始写）时，我只能输入一个字符 - 而且输入失去焦点。我不知道为什么焦点/模糊在幕后工作。也许它与角度魔法有关。

我很欣赏（1）如何更改代码以使其可用:)（不关注动态输入）和（2）解释当前解决方案为何错误。

Answer 1

您可以尝试使用此解决方案：

constructor(private fb: FormBuilder) {}

public userForm: FormGroup = this.fb.group({
  emails: this.fb.array([])
});

为ngModel交换formControlName：

<div class="form-group" *ngFor="let email of userForm.emails.controls; let i = index">
    <label [for]="i">Alternative email {{i}}:</label>
    <input class="form-control" [id]="i" placeholder="Alternative email" type="text" formControlName="email">
</div>

<button (click)="addAlternateEmailClicked()">add email</button> 

将新控件推送到窗体数组：

addAlternateEmailClicked(){

  const emails: FormArray = <FormArray>this.userForm.get('emails');

  // Validators is optional
  emails.push(this.fb.control('', Validators.required));
}