Почему ionChange / ngModelChange выполняется из ion-checkbox, куда я не звоню?

Question

У меня есть один ion-datetime и один ion-check-box.Если я выбираю дату, флажок должен быть false, если я нажимаю на флажок, и ion-datetime имеет значение, которое затем должно быть пустым.

https://prnt.sc/kx0ucq

 <form [formGroup]="registrationForm">   
    <ion-item>       
      <ion-label floating>Fecha Fin</ion-label>
      <ion-datetime displayFormat="DD-MM-YYYY" formControlName="date_end" 
                    (ngModelChange)="checkCheckEndDate()">
      </ion-datetime>
    </ion-item>
 </form>
 <ion-item>
     <ion-label>Trabajo aquí actualmente</ion-label>
     <ion-checkbox (click)="addValue()" [(ngModel)]="checked"></ion-checkbox>
 </ion-item>

Мой компонент checked: boolean = false;

Конструктор:

this.registrationForm = formBuilder.group({
     date_end: ['',]
 });

И эти 2:

addValue(): void {
    alert("addValue"+this.checked);
    if(this.checked){
      this.registrationForm.controls['date_end'].setValue('');
    }
  }

  checkCheckEndDate(){
    alert("checkCheckEndDate");
    if(this.registrationForm.controls['date_end'])
    {
      alert("if"+this.registrationForm.controls['date_end'].value)
      this.checked=false;
      alert(this.checked);
    }else{
      alert("no"+this.registrationForm.controls['date_end'].value)
      this.checked=true;
      alert(this.checked);
    }
  }

У меня вопрос, почему он запускается checkCheckEndDate(), когда я нажимаю на флажок?

Answer 1

Элемент ion-datetime настроен на запуск метода checkCheckEndDate при изменении его значения, а вы изменяете его значение в методе addValue, который запускается при нажатии ion-checkbox.Это ожидаемое поведение.

Обратите внимание, что Разработчики Angular Core рекомендуют не смешивать использование реактивных форм & ngModel.Ваше желаемое поведение может быть достигнуто без ngModel, настроив Observable в двух полях (используя valueChanges).

Чтобы отслеживать поле date_end и соответственно обновлять ion-checkbox, вымог бы написать код, подобный этому, после инициализации FormGroup:

this.registrationForm.get('date_end').valueChanges.subscribe(val => this.checked = !val);

С этим кодом вам не нужен метод checkCheckEndDate.