Angular 响应式表单：无法在页面加载时绑定复选框选中的属性

Question

在 Angular Reactive forms 中，我想要 Checkbox 的双向数据绑定，检查后我将检查变量分派到商店，页面加载后我也得到新的更新值。 但是那个复选框是isdateChkd变量，即使它即将到来的TRUE复选框在页面加载时没有被自动检查。

下面是 HTML 和 ts 文件..

HTML 文件

<form [formGroup]="form">
   <div class="abc" formControlName="inputDate">
     <div class="xyz">
       <p-calendar formControlName="inputDate" 
       [(ngModel)]="inputDateValue"
       class="abc"/>

       <input type="checkbox" id="checkbox-1" class="abc" name="dateChk"
       name="dateIsChecked" [(ngModel)]="isdateChkd" (change)="chkFunction($event.target.value)" />
    </div>
  </div>

</form>

组件.ts文件

public isdateChkd: boolean = false;

 ngOnInit() {

....Other service calls

// Call to get isdateChkd value

this.store.select(getValues).takeUntil(this.ngUnsubscribe).subscribe((data) => {

this.isdateChkd = data.defaultUpdate // this value holds boolean to be used


});

}

chkFunction(valule) {
 this.isdateChkd = value; // i get update when checkbox is checked

this.store.dispatch(new updateCheckboxCheckedService(value)); // after its checked dispatching it to the store
}

在此先感谢您的帮助...

Answer 1

您可以将checked属性与NgModel一起使用。

它在这里与 checked 以及值isdateChkd一起工作。 您也可以在此stackBlitz中查看此处

请尝试进行如下代码的更改

    ...
    <input type="checkbox" id="checkbox-1" class="abc" name="dateIsChecked" 
         [(ngModel)]="isdateChkd" (change)="chkFunction($event)" checked="isdateChkd" />
    ...

快乐编码.. :)