为什么复选框以角度显示真假

Question

我已经以角度创建了复选框，但是当我选中所有复选框时，它会显示 true 和 false。 但我试图以反应形式获取复选框值不正确和错误。

<input type="checkbox" formControlName="services" id="checkbox4" value="transcription">
<label for="checkbox4"><span>Transcription</span></label>
<input type="checkbox" formControlName="services" id="checkbox3" value="translation">
<label for="checkbox3"><span>translation</span></label>

我得到的回报不是复选框的价值。

我如何获得价值？

Answer 1

我已经尝试重新创建您的复选框示例并且它工作得很好。

1. 将输入包装成表格。
2. 为两个输入创建表单组。

在你的 component.ts 文件中

form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      services: new FormControl()
    });
  }

  getValues(event: Event) {
    console.log(event.target.value, event.target.checked);
    this.selectedCheckbox[event.target.value] = event.target.checked;
  }

在你的 component.html

<form (change)="getValues($event)" [formGroup]="form" (ngSubmit)="onSubmit()">
  <input
    type="checkbox"
    formControlName="services"
    id="checkbox4"
    value="transcription"
  />
  <label for="checkbox4"><span>Transcription</span></label>
  <input
    type="checkbox"
    formControlName="services"
    id="checkbox3"
    value="translation"
  />
  <label for="checkbox3"><span>translation</span></label>
  <p>Selected value: {{ selectedCheckbox | json }}</p>
</form>

完整示例： https ://stackblitz.com/edit/angular-hekmvm?file=src/app/app.component.html