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

发现以下修复：

从 (click)

<div>
    <label>Create or select a release for {{name}} </label>
    <input class="my-checkbox" formControlName="isCheckedRelease" type="checkbox" (click)="onCheckboxReleaseClick()" />
    </div>

到 (change)

<div>
    <label>Create or select a release for {{name}} </label>
    <input class="my-checkbox" formControlName="isCheckedRelease" type="checkbox" (change)="onCheckboxReleaseClick()" />
    </div>