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

我的系统中有一个User实体。每个用户都有一封邮件电子邮件（这里不相关）和一个字符串数组（具有更多不太重要的电子邮件）属性alternateEmails。angular2：动态添加项目数组的输入

我需要创建一个表单，主电子邮件始终显示 - 并且将具有所有备用电子邮件 - 每个备用电子邮件有1个输入。和一个按钮add email。用户界面中的标准接口。

这是我现在有：

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）解释为什么当前的解决方案是错误的。

来源

2017-05-28 ducin

[**请参阅本回答**]（https://stackoverflow.com/questions/44224772/why-output-not-working-in-angular-2）它有一个演示。 – Aravind

@Aravind这个确切的演示与动态输入插入无关。你什么意思？ – ducin

你确定这是不同于你的期望 – Aravind

你可以试试这个方法，而不是：

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

来源

2017-05-28 14:06:40 Chrillewoodz

我猜想，重型角度建造的解决方案可以开箱即用。我希望可以有一个更轻量级的方法来处理它。尤其是，在我的情况下，一切工作正常 - 只有除了这个焦点/模糊... – ducin

@ducin我认为问题是你试图绑定到一个动态的'ngModel'，这并不真正工作那很好，除非你用这种方法来做。它有时可能会提供一些意想不到的错误。我认为如果你尝试使用FormBuilder，你永远不会回头，它真的很整齐有力。 – Chrillewoodz

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

回答

相关问题