使用* ngIf动态构建的元素使用验证器进行角度2形式验证

Question

我有一张表格，正在使用Reactive Forms进行验证。我可以使所有验证工作除了我有一些有条件服务的输入，即使它们没有使用* ngIf提供给视图时仍然保持表单验证。我该怎么说＆＃34; Validators.required＆＃34;只有条件成立。请参阅示例。

constructor(
    private QRService:QRService,
    fb: FormBuilder
    ){
    this.title = 'My Form';
    this.showDeliveryTypes = false;
    this.complexForm = fb.group({
      'itemnumber' : [null, Validators.required],
      'dateofbirth' : [null, Validators.required],
      'deliverytype' : [null, Validators.required],
      'pickuplocation' : [null, Validators.required], //validates even if these aren't included using *ngIf
      'paymentoptions' : [null, Validators.required] //validates even if these aren't included using *ngIf
   })

};

如果* ngIf在表单中包含它们，我只想验证pickuplocations或paymentoptions。

<form [formGroup]="complexForm" (ngSubmit)="findScript(complexForm.Form)">
  <h2>Script Number</h2>
  <input type="number" name="script" [(ngModel)]="itemno" (blur)="getScripts(itemno)" [formControl]="complexForm.controls['itemnumber']">
  <h2>Date of birth</h2>
  <input type="date" name="dob" [(ngModel)]="dateofbirth" (blur)="getScripts(scriptno, dateofbirth)" [formControl]="complexForm.controls['dateofbirth']" required>
  <div *ngIf="showDeliveryTypes" name="deliverytypes">
  <h3>Delivery Method</h3>
  <select #select [(ngModel)]="selectedId" (change)="validateDeliveryTypes(select.value)" name="deliveryoptions" [formControl]="complexForm.controls['deliverytype']">
    <option *ngFor="let item of qrData.DeliveryTypes" [value]="item.DeliveryTypeId">{{item.DeliveryTypeName}}</option>

  </select>
  </div>
  <div *ngIf="showPickupLocations" name="pickuptypes">
  <h3>Pickup Locations</h3>  //I don't want to validate these UNLESS the *ngIf is true
  <select #select [(ngModel)]="selectedPickupId" (change)="checkVals(select.value)" name="pickupoptions" [formControl]="complexForm.controls['pickuplocation']">
    <option *ngFor="let item of selectedItem.PickupLocations" [value]="item.PickupLocationId">{{item.PickupLocationName}}</option>

  </select>
  </div>
  <div *ngIf="showPaymentOptions" name="paymentoptions">
  <h3>Payment Types</h3>  //I don't want to validate these UNLESS the *ngIf is true
  <select #select [(ngModel)]="selectedPayment" (change)="checkVals(select.value)" name="selectpaymentoptions" [formControl]="complexForm.controls['paymentoptions']">
    <option *ngFor="let item of selectedItem.PaymentTypes" [value]="item.PaymentTypeId">{{item.PaymentTypeName}}</option>

  </select>
  </div>
  <button (click)="findScript()" type="submit" name="submitbutton" [disabled]="!complexForm.valid">Find Prescription</button>
</form>

我仍然是Angular2的新手，并且可以在Angular 1中轻松完成这项任务，但我真的希望在未来的开发中转移到Angular2。