Angular FormBuilder ne pas réinitialiser les tableaux

Question

Après chaque tentative d'enregistrement des éléments sélectionnés, j'aimerais que cette liste soit effacée ou vide. Par exemple, un utilisateur a sélectionné un élément - sélectionne Enregistrer. Dans la console, vous verrez cet objet que vous avez sélectionné. Maintenant, si vous sélectionnez l'autre élément et sélectionnez Enregistrer, vous verrez toujours l'élément précédent qui a été sélectionné dans la console. Ce serait mieux si après chaque sauvegarde, le tableau était effacé.

Première sauver:

selectedMessages 
Array(1) 
{messageID: 222, message: "text"} 

Deuxième Economie:

selectedMessages 
Array(2) 
{messageID: 222, message: "text"} 
{messageID: 331, message: "text Two"} 

component.ts

rMessages: Message[] = []; 
    aMessages: Message[] = []; 


constructor( 
    public formBuilder: FormBuilder, 
) { 
    this.messageForm = formBuilder.group({ 
     selectedMessages: this.formBuilder.array([]) 
    }) 
    } 
    save(form){ 
    console.log(form.value.selectedMessages) 
    } 

select(rmessage:Message, isChecked: boolean){ 
    const selectedMessages = <FormArray>this.messageForm.controls.selectedMessages; 
    if(isChecked) { 
     selectedMessages.push(new FormControl(rmessage)); 
    } else { 
     let index = selectedMessages.controls.findIndex(x => x.value.messageID == rmessage.messageID); 
     selectedMessages.removeAt(index); 
    } 
    } 
buildChecked() { 
    const arr = this.rMessages.map(message => { 
     console.log(this.formBuilder.control(message.messageID)) 
     return this.formBuilder.control(message.messageID) 
    }); 
    return this.formBuilder.array(arr); 
    } 

HTML

<form [formGroup]="messageForm" (ngSubmit)="save(messageForm)"> 
    <ion-list active text-wrap *ngSwitchCase="'received'" > 
     <div class="items"> 

    <ion-item *ngFor="let rmessage of rMessages; index as i"> 
     <ion-label> 
      {{rmessage.message}} 
     </ion-label> 
     <ion-checkbox (ionChange)="select(rmessage, $event.checked)" value="rmessage"></ion-checkbox> 
    </ion-item> 

     </div> 
     <button ion-button full type="submit" style="font-size:1.8rem">save</button> 
    </ion-list> 
    </form> 

Mise à jour - w/réinitialisation ne fonctionne pas. obtenir null.

rMessages: Message[] = []; 
     aMessages: Message[] = []; 


    constructor( 
     public formBuilder: FormBuilder, 
    ) { 
     this.messageForm = formBuilder.group({ 
      selectedMessages: this.formBuilder.array([]) 
     }) 
     } 
     save(form){ 
this.rMessages = this.rMessages.filter((resultTwo) => { 
     return !form.value.receivedMessages.find((resultOne) => { 

     return resultTwo.messageID === resultOne.messageID 
     }) 
    }) 
     this.aMessages = this.aMessages.concat(form.value.receivedMessages.filter((resultOne) => { 
     console.log(resultOne, 'results') 

     return resultOne 

    })) 
     this.messageForm.reset() 
     } 

    select(rmessage:Message, isChecked: boolean){ 
     const selectedMessages = <FormArray>this.messageForm.controls.selectedMessages; 
     if(isChecked) { 
      selectedMessages.push(new FormControl(rmessage)); 
     } else { 
      let index = selectedMessages.controls.findIndex(x => x.value.messageID == rmessage.messageID); 
      selectedMessages.removeAt(index); 
     } 
     } 
    buildChecked() { 
     const arr = this.rMessages.map(message => { 
      console.log(this.formBuilder.control(message.messageID)) 
      return this.formBuilder.control(message.messageID) 
     }); 
     return this.formBuilder.array(arr); 
     } 

Answer 1

vous pouvez effacer la forme

this.messageForm.reset() 

et le texte reste dans la console

Answer 2

Lorsque vous voulez effacer le tableau et le définir comme vide, utilisez setControl()

this.messageForm.setControl('selectedMessages', this.formBuilder.array([])) 

cela remplacera votre tableau existant.