angular - 如果选中了 FormControl 复选框，如何阅读

Question

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

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

}

标签： angulartypescriptform-control

Answer 1

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

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

在Stackblitz工作演示。

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