Question

我有一个具有单个复选框和一个按钮的简单应用程序。当我单击按钮时，计时器将启动，并在每1秒的循环中，它应将复选框检查状态更改为已检查和未检查。

为确保绑定的formControl的值正常工作，我添加了一个文本框，并将相同的formControl（isActive）绑定到该文本框。

我的问题是：文本框上的值反复更改为“ true”和“ false”，但复选框选中的状态没有更改。

我的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>

我的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)
  }
}

我的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
  });
}

表单控制值更改为角度8

1 个答案: