FormGroup 异步问题 Edge 与 Angular 中的 Chrome

Question

我创建了一个 FormGroup，根据是否选中复选框，部分需要禁用。这适用于我的代码，但过了一段时间我发现它不适用于 Microsoft Edge（仅使用 Chrome 进行了测试）。它只会有反应

我看了一下我的代码，似乎我犯了一个错误，并且 Microsoft Edge 上显示的 UI 是正确的，但 Chrome 中的 UI 却不是。

在我看来，这像是一个异步问题，因为如果我设置了console.log()after this.checkinForm.controls['releaseDropdown'].enable()，那么在第一次单击该复选框后，它不会在 Chrome 中记录任何内容。第二次重新单击它后，它会启用，但随后该复选框未被选中，应该被禁用。

有人看到我做错了什么吗？

Stackblitz https://stackblitz.com/edit/angular-wqsd3y

我的代码如下所示：

打字稿

checkinForm: FormGroup;

...

ngOnInit(): void {

...

 this.checkinForm = this.formBuilder.group({

      isCheckedRelease: new FormControl(false),

      releaseDropdown: new FormControl({value: null, disabled: true}),

      newRelease: new FormControl({value: null, disabled: true}),

      description: new FormControl(null),

      isCheckedConfig: new FormControl(false)

    });

...

}

 onCheckboxReleaseClick(){

    if(this.checkinForm.controls['isCheckedRelease'].value === true){

      this.checkinForm.controls['releaseDropdown'].enable()

      this.checkinForm.controls['newRelease'].enable()

    }else{

      this.checkinForm.controls['releaseDropdown'].disable()

      this.checkinForm.controls['newRelease'].disable()

    }

  }

超文本标记语言

<form [formGroup]="checkinForm">

    <div>

        <label>The default chosen release in the configuration is: &nbsp;</label>

        <label style="color: red;"> {{defaultBranch}}</label>

    </div>

    <div>

        <label>Create or select a release for {{name}} </label>

        <input class="my-checkbox" formControlName="isCheckedRelease" type="checkbox" (click)="onCheckboxReleaseClick()" />

    </div>

Answer 1

发现以下修复：从&nbsp;(click)<div> &nbsp;&nbsp;&nbsp;&nbsp;<label>Create&nbsp;or&nbsp;select&nbsp;a&nbsp;release&nbsp;for&nbsp;{{name}}&nbsp;</label> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;class="my-checkbox"&nbsp;formControlName="isCheckedRelease"&nbsp;type="checkbox"&nbsp;(click)="onCheckboxReleaseClick()"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</div>到&nbsp;(change)<div> &nbsp;&nbsp;&nbsp;&nbsp;<label>Create&nbsp;or&nbsp;select&nbsp;a&nbsp;release&nbsp;for&nbsp;{{name}}&nbsp;</label> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;class="my-checkbox"&nbsp;formControlName="isCheckedRelease"&nbsp;type="checkbox"&nbsp;(change)="onCheckboxReleaseClick()"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</div>