如果选中了 FormControl 复选框，如何阅读答案

【问题标题】：How to read if FormControl checkbox is checked如果选中了 FormControl 复选框，如何阅读
【发布时间】：2021-03-16 05:38:22
【问题描述】：

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

但是，当我尝试从复选框中读取时，该值始终为 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();
    }

}

【问题讨论】：

请立即检查解决方案。

标签： angular typescript form-control

【解决方案1】：

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

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

Stackblitz 的工作演示。

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

【讨论】：

你检查提交方法了吗？
该控制台记录复选框的值，真或假。
请检查 gif。它可能会有所帮助。
它适用于 stackblitz 但不适用于我的解决方案。