How can I prevent the NgModel from changing my @Input in the two components?

Question

I have a problem with my @input, and it is that NgModel affects the components with the parent and child(modal) what happens is that when I close it (X) it sends the data to the parent it should only do it when I hit the send button.

Video of the problem I cannot insert videos

ticket-detail.component.html

<div lines="none" *ngIf="field.type === 'select_users'">
       <ion-item (click)="selectUsers(this.users)">
            <ion-icon slot="end" name="people"></ion-icon>
            <ion-label>Select users</ion-label>
       </ion-item>
</div>

ticket-detail.component.ts

  async selectUsers(users: UserAssignment[]) {
    const modal = await this.modalController.create({
      component: UsersListComponent,
      breakpoints: [0.1, 0.7, 1],
      initialBreakpoint: 0.7,
      componentProps: {
        users,
      },
    });

    await modal.present();

    const { data } = await modal.onDidDismiss();
    console.log( 'list users' )
    console.log( this.users )
    // if (data != undefined || data != null) {
    //   console.log(data);
    //   this.users = await data;
    // }
  }

users-list.component.html

 <ion-list>
        <ion-list-header>Select users</ion-list-header>
        <ion-item *ngFor="let user of users">
          <ion-label>{{ user.names }}</ion-label>
          <ion-checkbox 
          [(ngModel)]="user.selected"
          [ngModelOptions]="{ standalone: true }"
          color="primary" 
          checked slot="start">
        </ion-checkbox>
        </ion-item>
        <section class="full-width">
          <ion-button expand="full" color="secondary" (click)="saveSelectUsers()">Confirmar</ion-button>
        </section>
 </ion-list>

users-list.component.ts

export class UsersListComponent implements OnInit {

  //users:UserAssignment[]= [];

  @Input() users: UserAssignment[]= [];

 // users: UserAssignment[]= [];

  textShearch: string = '';

  filterColumns = ['names']

  constructor(
    private userService: UserService,
    private uiServiceService: UiServiceService,
    private modalController: ModalController
  ) { }

  async ngOnInit() {
    if (this.users.length === 0) {
      await this.userList();
    } 
  }


  userList() {
    console.log('estoy aqui');

      this.userService.userListAssignment().subscribe(
        async (users) => {
          //this.users = users;
          this.users.push(...users.users)
        },
        async (error) => {
          console.error(error);
          this.users = [];
          await this.uiServiceService.errorToastPets('Error al consultar los usuarios');
        }
      ); 
   
  }

  viewTextSearch( event ) {

    this.textShearch = event.text

  }

  //  getArray(): any[] {
  //   if (this.users.length === 0) {
  //      return  this.users;
  //   }else {
  //      return  this.users;
  //   }
  // }


  saveSelectUsers() {

    //this.modalController.dismiss(this.users);

    //If it did not send data, it was still storing
    this.modalController.dismiss();

  }

}

Thank you.

Answer 1

ngModelOption input accepts FormHooks config, where you can define how it should update ngModel. Pass {updateOn:'submit'} to ngModelOption so that it will update ngModel only on submit

Try this

  <ion-list>
            <ion-list-header>Select users</ion-list-header>
            <ion-item *ngFor="let user of users">
              <ion-label>{{ user.names }}</ion-label>
              <ion-checkbox 
              [(ngModel)]="user.selected"
              [ngModelOptions]="{ standalone: true, updateOn:'submit' }"
              color="primary" 
              checked slot="start">
            </ion-checkbox>
            </ion-item>
            <section class="full-width">
              <ion-button expand="full" color="secondary" (click)="saveSelectUsers()">Confirmar</ion-button>
            </section>
     </ion-list>