如何读取 FormControl 复选框是否被选中

如何解决如何读取 FormControl 复选框是否被选中

我有两个输入。一个是复选框，另一个是自动完成输入。当复选框被选中时，我想从自动完成输入中读取。未选中复选框时，我想在不读取输入的情况下运行代码。

但是，当我尝试从复选框中读取时，即使我单击复选框然后点击提交，该值始终为 null，dirty 始终为 false。我如何在此处获取复选框值？

这是 HTML

<mat-checkBox #checkBox [formcontrolname]="cbAddVestingOption" style="padding-bottom: 200px;">Add Vesting Option</mat-checkBox>
                <mat-form-field *ngIf="checkBox.checked" style="width: 600px">
                  <div>
                    <input type="text" placeholder="Vesting Option" matInput formcontrolname="vestedoptions" [matAutocomplete]="auto" class="uppercase" />
                    <mat-error *ngIf="!isFreeTextValid">{{this.freeTextErrorMessage}}</mat-error>
                    <mat-autocomplete #auto="matAutocomplete">
                      <mat-option *ngFor="let option of vestedOptions" [value]="option" (onSelectionChange)="selected($event)">
                        {{option}}
                      </mat-option>
                    </mat-autocomplete>
                  </div>
                </mat-form-field>

在我的打字稿代码中，我将复选框添加到 init() 中的表单组，然后在 submit() 中检查复选框的值

ngOnInit() {
    this.vestedOptionsDetailForm = new FormGroup({
      vestedoptions: new FormControl(null,Validators.maxLength(30)),cbAddVestingOption: new FormControl(null)
    })
}

submit() {
    if (this.vestedOptionsDetailForm.controls["cbAddVestingOption"].value == "true") {
      this.downloadEOPIVestedOption();
    }
    else {
      this.downloadEOPI();
    }

}

解决方法

只需将 [formcontrolname]="cbAddVestingOption" 更改为 formControlName="cbAddVestingOption"。

还有另一个变化，== "true" 到 == true。

在 Stackblitz 进行工作演示。

视频：https://giphy.com/gifs/7Hb3m0rvB9Zj5juUwd