Флажок check check state не изменяется во время выполнения, когда значение элемента управления формы изменяется на угловой 8

Question

У меня есть простое приложение, которое имеет один флажок и кнопку.Когда я нажимаю кнопку, запускается таймер, и в каждом 1-секундном цикле он должен поменять состояние флажка на «проверено и не проверено».

, чтобы убедиться, что значение связанного formControl работает правильно, яЯ добавил текстовое поле, и я связал тот же formControl (isActive) с этим текстовым полем.

Моя проблема: значение в текстовом поле неоднократно меняется на "true" и "false", но флажок отмеченне меняется.

my app.component.html выглядит следующим образом.

<div name="dvMain" [formGroup]="formComponents">
  <input type="text" formControlName="isActive"/>
  <input type="checkbox" formControlName="isActive"/>
  Active
  <button (click)="start()">Start</button>
</div>

my app.component.ts выглядит следующим образом.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'checkbox-app';
  public formComponents : FormGroup;
  private interval;

  constructor(private formBuilder: FormBuilder){}

  ngOnInit(): void {
    this.formComponents = this.formBuilder.group({
      isActive:[false]
    });
  }

  public start():void{
    this.startTimer();
  }

  private startTimer(): void {
    let i: number = 0;
    this.interval = setInterval(() => {
      this.formComponents.patchValue({
        isActive: [i++ % 2 == 0]
      });
    }, 1000)
  }
}

my app.module.tsвыглядит так

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

пожалуйста, смотрите мой проект в stackblitz

Answer 1

В вашем startTimer(), избавьтесь от квадратных скобок в isActive: [i++ % 2 == 0], ваш интервал должен нормально работать с: isActive: i++ % 2 == 0 или isActive: (i++ % 2 == 0), если вы хотите, чтобы скобки сделали его более читабельным.

Кроме того, если вы также хотите обновить значение текстового поля, когда флажок установлен вручную, вы можете добавить обнаружение изменений в флажок:

 <input type="checkbox" formControlName="isActive" (change)="onCheckChange($event)"/>

onCheckChange(e){
  this.formComponents.patchValue({
    isActive: e.target.checked
  });
}