使用* ngIf動態構建的元素使用驗證器進行角度2形式驗證

Question

我有一個表單，我正在使用Reactive Forms進行驗證。 我可以使所有驗證工作除了我有一些有條件服務的輸入，即使它們沒有使用* 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在表單中包含它們，我只想驗證picklocations或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。

Answer 1

一種方法是在從DOM中隱藏表單字段時禁用表單字段。 禁用表單控件，完全從表單中排除該表單字段，這是您想要的。 如果您確實需要在提交時獲取表單中包含的值，則可以使用方法getRawValue 。 但是否則表格字段將被完全排除。

由於您的表單非常復雜，我已經為您設置了一個簡單的示例代碼和plunker，我們禁用lastname並將其從DOM中刪除。

由於不知道你如何切換showPickupLocations和showPaymentOptions ，我只需在這里使用一個按鈕，它可以切換姓氏的可見性。 所以表單看起來像這樣：

<button (click)="toggle()">Toggle lastname</button>
<form [formGroup]="myForm">
  <label>firstname: </label>
  <input formControlName="firstname"/>
  <div *ngIf="toggl">
     <label>lastname: </label>
     <input formControlName="lastname"/>
  </div>
</form>

當我們在DOM中切換lastname可見性時，我們還會切換表單域的啟用和禁用：

toggle() {
  this.toggl = !this.toggl;
  let control = this.myForm.get('lastname')
  control.enabled ? control.disable() : control.enable()
}

如上所述，這從表單中排除了字段，因此驗證不會成為問題。 在這個演示plunker中，您可以看到切換如何從表單值中完全刪除lastname字段。

演示