FormGroup 异步问题 Edge vs Chrome in Angular

Question

我创建了一个 FormGroup，部分需要 disabled 取决于 checkbox 是否被选中。这适用于我的代码，但一段时间后我注意到它不适用于 Microsoft Edge（仅使用 Chrome 进行测试）。它只会反应

我看了一下我的代码，好像我犯了一个错误，在 Microsoft Edge 上显示的 UI 是正确的，但是在 Chrome 中显示的不是..

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

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

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

我的代码如下所示：

TypeScript

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()
    }
  }

HTML

<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>
    <div>
        <label>Select a release:</label>
        <select formControlName="releaseDropdown" class="form-control" [ngClass]="{ 'is-invalid': f.releaseDropdown.errors }" style="width: 50%;">
            <option *ngFor="let b of branches">{{b}}</option>
        </select>
        <label>Or create a new release:</label>
        <input type="text" formControlName="newRelease" class="form-control" [ngClass]="{ 'is-invalid': f.newRelease.errors }" placeholder="Name of the new release..." style="width: 50%;">
        <label>Description for release:</label>
        <input type="text" formControlName="description" class="form-control" [ngClass]="{ 'is-invalid': f.description.errors }" placeholder="Enter description for this release..." style="width: 50%;">
    </div>
    <div class="my-2">
        <label>Check-in config folder for {{name}}</label>
        <input class="my-checkbox" formControlName="isCheckedConfig" type="checkbox" />
    </div>
</form>

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>

FormGroup 异步问题 Edge vs Chrome in Angular

FormGroup async problem Edge vs Chrome in Angular

html

asynchronous

angular

formgroups