ngModel गतिशील डेटा गलत व्यवहार

Question

के साथ ngFor का उपयोग करना मेरे पास मेरे आवेदन के तर्क में जटिल और शायद रूकी बग है, इसलिए मैं व्यापक मात्रा में जानकारी देने की कोशिश करूंगा।

मेरे पास पंजीकरण डेटा मेरे डेटा मॉडल से जुड़ा हुआ है। पंजीकरण के दौरान उपयोगकर्ता द्वारा फ़ोन नंबर फ़ील्ड जोड़ा जा सकता है और सरणी के रूप में सहेजा जा सकता है।

मेरे मॉडल:

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

और इस भाग से अजीब चीजें होती हैं। लॉग के अनुसार डेटा मेरे मॉडल में ठीक से लिखता है लेकिन यूआई में अंतिम तत्व इनपुट फ़ील्ड में सबकुछ बदल देता है। लेकिन इस पल के लिए प्रदर्शित फ़ोनों में से एक को हटाने के बाद यूआई की अंतिम स्थिति का प्रतिनिधित्व करने लगता है।

मेरे लॉग रिकॉर्डिंग के दौरान कब्जा कर लिया:

"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 में जोड़ा नहीं जा सकता है और यह समस्या ठीक होनी चाहिए। आपको अपने इनपुट से name विशेषता को भी हटा देना चाहिए क्योंकि टेम्पलेट संचालित फ़ॉर्म का उपयोग करते समय उनमें से केवल एक की आवश्यकता है। (name या standalone: true)