当字段来自ngSwitch选择的子组件时如何验证表单

Question

我在下面的模态窗口中有一个窗体，并且从ngSwitch中选择了模态主体内的窗体字段。我想根据来自子组件的字段是否有效（必需）来禁用或启用保存按钮。但是我认为我没有正确地完成工作，因为在子组件字段“产品”中输入值不会启用“保存更改”按钮。

我确定每个子组件中的字段都未与表单通信

claimExposureForm

在父组件中。因此，即使我在子组件的“产品”字段中键入一个值，我的“保存更改”按钮也永远不会启用。

这是我的代码

父组件

<div bsModal #ceExposureModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ceExposureModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="ceExposureModal" class="modal-title pull-left">Edit Claim Exposure</h4>
        <button type="button" class="close pull-right" (click)="ceExposureModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #claimExposureForm="ngForm" (ngSubmit)="saveClaimExposure()">
          <ng-container [ngSwitch]="claim.trustGroup.name">
            <app-flintk-exposure [ceModal]="ceModal" *ngSwitchCase="'FLINTK'" [claim]="claim" [claimForm]="claimForm"></app-flintk-exposure>
            <app-pcc-exposure [ceModal]="ceModal" *ngSwitchCase="'PCC'" [claim]="claim" [claimForm]="claimForm"></app-pcc-exposure>
            <app-arm-exposure [ceModal]="ceModal" *ngSwitchCase="'ARM'" [claim]="claim" [claimForm]="claimForm"></app-arm-exposure>
          </ng-container>
        </form>
        <div class=modal-footer>
          <button type="button" class="btn btn-primary" (click)="claimExposureForm.ngSubmit.emit()" [disabled]="claimExposureForm.form.invalid || !claimExposureForm.form.dirty">Save Changes</button>
          <button type="button" class="btn btn-secondary" (click)="ceExposureModal.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

子组件

export class ArmExposureComponent implements OnInit {

  @Input() claim: any;
  @Input() claimForm: NgForm;
  @Input() ceModal: any = {};

  constructor() {}

  ngOnInit() {
    // do some stuff
  }

  setExposureFields(row: any) {
    const data = this.claim.claimExposures[row];
    this.ceModal.product = data.product;
  }

  saveExposureFields(row: any) {
    const claimExposure = this.claim.claimExposures[row];
    claimExposure.product = this.ceModal.product;

  }

  markDirty() {
    this.claimForm.form.markAsDirty();
  }

}

<div class="form-group col-md-4">
  <label for="ceProduct">Product</label>
  <input type="text" class="form-control" placeholder="ex. Something here" [(ngModel)]="ceModal.product" (ngModelChange)="markDirty()" name="ceProduct" #ceProduct="ngModel" required>
  <div [hidden]="ceProduct.valid || ceProduct.pristine" class="alert alert-danger">Product is required</div>
</div>

Answer 1

[我认为您需要做的主要事情是使该提交按钮上的按钮类型=“ submit”。我还将检查有效属性，而不是无效属性，但这只是个人喜好。如果没有其他问题，我将开始在控制台中记录处理提交的方法内的表单值（暂时删除[已禁用]代码）。

祝您好运，祝您编程愉快！