Javascript Angular 2表单验证使用验证器和使用*ngIf动态构建的元素

我有一个表单，正在使用反应表单进行验证。我可以让所有的验证都正常工作，除了我有一些有条件地提供的输入，这些输入仍然阻止表单进行验证，即使它们没有使用*ngIf提供给视图。如果条件为真，我怎么能说“Validators.required”。请参见示例

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>

脚本编号
出生日期
交付方式
{{item.DeliveryTypeName}
拾取位置//我不想验证这些，除非*ngIf为true
{{item.PickupLocationName}
付款类型//我不想验证这些，除非*ngIf为true
{{item.PaymentTypeName}
找药方

---

我对Angular2还是一个新手，在Angular1中可以很容易地做到这一点，但我真的很想在将来的开发中使用Angular2。

一种方法是在对DOM隐藏表单字段时禁用表单字段。禁用表单控件时，会完全从表单中排除该表单字段，这正是您所需要的。如果您确实需要在提交时获取表单中包含的值，可以使用方法

getRawValue

。但除此之外，表单字段将被完全排除

由于您的表单非常复杂，我为您设置了一个简单的示例代码和plunker，在这里我们禁用lastname并将其从DOM中删除

由于不知道如何切换

showPickupLocations

和

showPaymentOptions

，因此我将在此处使用一个按钮来切换lastname的可见性。因此，表单将如下所示：

切换lastname
名字：
姓氏：

当我们在DOM中切换lastname可见性时，我们也会切换formfield的启用和禁用：

toggle（）{
this.toggl=！this.toggl；
让control=this.myForm.get（'lastname'）
control.enabled？control.disable（）：control.enable（）
}

如上所述，这将从表单中排除该字段，因此验证不会成为问题。在这个演示plunker中，您可以看到切换如何从表单值中完全删除

lastname

字段

---

因此，如果

showPickupLocations

和

showPaymentOptions

为false，您仍然希望通过不验证这两个字段来继续填写表单？准确地说。仅当这些值为真时才验证这些值，从而将输入插入表单中。