ngModelで動的データを使用すると間違った動作が発生する

Question

私はアプリケーションのロジックに複雑でおそらくルーキーなバグがあるので、包括的な情報量を提供しようとします。

データモデルにバインドされた登録フォームがあります。電話番号フィールドは、登録時にユーザーによって追加され、配列として保存されます。

マイモデル：

export class RegistrationFormModel { 
    // 
    // 
    Phones: Array<{Phone: string;}>; 
    // 
    // 
} 

、フォームのこの部分の表現

 <ion-item *ngFor="let Phone of regModel.Phones; let i = index"> 

     <ion-label floating>Phone number*</ion-label> 
     <ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" name="Phone" #Phone="ngModel" 
        pattern="\d{10}"></ion-input> 
     <ion-icon *ngIf="i==0" name="ios-add-circle-outline" item-right no-padding 
        (click)="addPhone()"></ion-icon> 
     <ion-icon *ngIf="i!=0" name="ios-remove-circle-outline" item-right no-padding 
        (click)="removePhone(i)"></ion-icon> 

    </ion-item> 

電話機を追加および削除する私の方法。私はデバッグの目的でログと増分インデックスを追加しました：

debugIndex = 0; 
\\ 
\\ 
    addPhone() { 
    console.log('phones before add: ' + JSON.stringify(this.regModel.Phones)); 
    this.regModel.Phones.splice((this.regModel.Phones.length), 0, {Phone: '' + this.debugIndex++}); 
    console.log('phones after add: ' + JSON.stringify(this.regModel.Phones)); 
    } 

    removePhone(i: number) { 
    console.log('phones before delete: ' + JSON.stringify(this.regModel.Phones)); 
    this.regModel.Phones.splice(i, 1); 
    console.log('phones after delete: ' + JSON.stringify(this.regModel.Phones)); 
    } 

そして、この部分からは奇妙なことが起こります。ログによると、私のモデルではデータは正しく書き込まれますが、UIでは最後の要素が入力フィールドのすべてを置き換えます。 しかし、この瞬間に表示された電話機の1つを取り外した後は、UIの最後の状態を表すように見えます。記録中にキャプチャ

マイログ：

"phones before add: [{"Phone":"123456789"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"0"}]", 
    "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
    "phones before delete: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
    "phones after delete: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"2"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"},{"Phone":"3"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]", 
    "phones before delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]" 
    "phones after delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"4"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"},{"Phone":"5"}]" 

任意の助けを感謝し、事前に感謝します。

Answer 1

あなたの入力に[ngModelOptions]="{standalone: true}"を追加すると、問題を修正する必要があります：NgModelディレクティブを使用して、すべての入力の場合

<ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" 
[ngModelOptions]="{standalone: true} #Phone="ngModel" pattern="\d{10}"> 
</ion-input> 

を、FormControlが作成され、それがFormGroupに追加されますが、あなたがstandalone: trueを追加するとき、フィールドは」勝ちましたFormGroupに追加する必要があります。この問題は修正する必要があります。テンプレートドリブンフォームを使用する場合は、そのうちの1つだけが必要なため、入力からname属性も削除する必要があります。 （nameまたはstandalone: true）