Question

我有一个xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"和一个The name "ButtonChrome" does not exist in the namespace "clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"。如果我选择一个日期，则该复选框应该为ion-datetime，如果我单击该复选框，并且ion-check-box的值应该为空。

https://prnt.sc/kx0ucq

false

我的组件是ion-datetime

构造函数：

 <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>

还有这2个：

checked: boolean = false;

我的问题是，当我单击复选框时为什么执行this.registrationForm = formBuilder.group({ date_end: ['',] });？

Answer 1

ion-datetime元素配置为在其值更改时运行checkCheckEndDate方法，并且您正在addValue方法中更改其值，而ion-checkbox方法在ngModel时运行被点击。这是预期的行为。

请注意，Angular core developers advise against mixing usage of reactive forms & ngModel。通过在两个字段上设置Observable（使用valueChanges），可以在没有date_end的情况下实现所需的行为。

要监视ion-checkbox字段并相应地更新FormGroup，可以在初始化this.registrationForm.get('date_end').valueChanges.subscribe(val => this.checked = !val);之后编写类似的代码：

checkCheckEndDate

使用此代码后，您不需要{{1}}方法。

为什么ionChange / ngModelChange在我不调用的ion-checkbox中执行？

1 个答案: