javascript - 使用带有使用 *ngIf 动态构建的元素的验证器进行 Angular 2 表单验证

Question

我有一个表单，正在使用响应式(Reactive)表单进行验证。我可以让所有验证工作，除非我有一些有条件提供的输入，即使它们没有使用 *ngIf 提供给 View ，它们仍然使表单无法验证。仅当条件为真时，我才能说“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 在表单中包含它们)。

<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，我们在其中禁用姓氏并将其从 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 中切换姓氏可见性时，我们还会切换表单字段的启用和禁用:

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

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

Demo