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：動態添加項目數組的輸入

回答

相關問題