FormGroup asyn c проблема Edge против Chrome в Angular

Question

Я создал FormGroup, которая частично нуждается в отключении в зависимости от того, установлен флажок или нет. Это работало с моим кодом, но через некоторое время я заметил, что он не работает на Microsoft Edge (тестировался только с Chrome). Он реагирует только на

. Я посмотрел на свой код, мне показалось, что я допустил ошибку, и что пользовательский интерфейс в Microsoft Edge отображается правильно, но в Chrome нет ..

Это кажется мне асинхронной проблемой, потому что, если я установлю console.log() после this.checkinForm.controls['releaseDropdown'].enable(), он ничего не регистрирует в 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>