如果组中的控件之一具有值，如何在 Angular 2 表单中进行简单的跨域验证以通过验证？

Question

这么常用，一定有简单的方法来解决这个问题！所以情况是这样的。我有一个表单组：

  <ion-item-group formGroupName="alternativeRevenue">
    <ion-item-divider color="primary" text-wrap sticky>Alternative revenue </ion-item-divider>
    <ion-item>
      <ion-label>Branded content</ion-label>
      <ion-toggle formControlName="brandedContent"></ion-toggle>
    </ion-item>
    <ion-item text-wrap *ngIf="businessFoundationsForm.get('alternativeRevenue.brandedContent').value">
      <ion-label floating>you want to work with?</ion-label>
      <ion-input formControlName="typesOfBrands"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Merchandise</ion-label>
      <ion-toggle formControlName="merchandise"></ion-toggle>
    </ion-item>
    <ion-item text-wrap *ngIf="businessFoundationsForm.get('alternativeRevenue.merchandise').value">
      <ion-label floating>What types of brands</ion-label>
      <ion-input formControlName="typeOfMerchandise"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Podcasts</ion-label>
      <ion-toggle formControlName="podcasts"></ion-toggle>
    </ion-item>
    <ion-item text-wrap *ngIf="businessFoundationsForm.get('alternativeRevenue.podcasts').value">
      <ion-label floating>Brainstorm topic ideas </ion-label>
      <ion-textarea fz-elastic formControlName="podcastIdeas"></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label>Tours</ion-label>
      <ion-toggle formControlName="tours"></ion-toggle>
    </ion-item>
    <ion-item text-wrap *ngIf="businessFoundationsForm.get('alternativeRevenue.tours').value">
      <ion-label floating>Brainstorm tour </ion-label>
      <ion-textarea fz-elastic formControlName="tourIdeas"></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label>Deals</ion-label>
      <ion-toggle formControlName="licensingDeals"></ion-toggle>
    </ion-item>
    <ion-item text-wrap *ngIf="businessFoundationsForm.get('alternativeRevenue.licensingDeals').value">
      <ion-label floating>Two ideas for licensing</ion-label>
      <ion-textarea fz-elastic formControlName="licensingIdeas"></ion-textarea>
    </ion-item>
  </ion-item-group>

这是组件中的表单组：

   alternativeRevenue: this.fb.group({
    brandedContent: [false],
    typesOfBrands: [null],
    merchandise: [false],
    typeOfMerchandise: [null],
    podcasts: [false],
    podcastIdeas: [null],
    tours: [false],
    tourIdeas: [null],
    licensingDeals: [false],
    licensingIdeas: [null]
  }, {validator: alternativeRevenueGroupValidator})

我的目标是，如果 select / ion-toggle 之一为真，并且关联的输入字段不为空且最小长度超过 10，则验证 from 组。如果我将 [Validators.required、Validators.minLength(10)] 添加到所有字段，则需要在验证表单组之前填写所有字段。我只希望其中一个得到验证，然后整个组都得到验证。我怎样才能做到这一点？

更新：这里是 alternativeRevenueGroupValidator。

        function alternativeRevenueGroupValidator(c: AbstractControl) {
          let brandedContent = c.get('brandedContent');
          let typesOfBrands = c.get('typesOfBrands');
          let merchandise = c.get('merchandise');
          let typeOfMerchandise = c.get('typeOfMerchandise');
          let podcasts = c.get('podcasts');
          let podcastIdeas = c.get('podcastIdeas');
          let tours = c.get('tours');
          let tourIdeas = c.get('tourIdeas');
          let licensingDeals = c.get('licensingDeals');
          let licensingIdeas = c.get('licensingIdeas');

          if (brandedContent || merchandise || podcasts|| tours || licensingDeals) {
            if (typesOfBrands.value || typeOfMerchandise.value || podcastIdeas.value || tourIdeas.value || licensingIdeas.value) {
              return null;
            }
          }

          return {'GroupNoValue': true};
        }

如您所见，它非常丑陋。而且它只能验证输入字段是否有值。我无法评估最小或最大长度或使用这样的库 enter link description here

Answer 1

FormGroup 构造函数的第二个参数允许您定义自定义组验证器。

在组验证器中，确定是否满足有效表单的条件（即至少一个输入字段非空，并且字段长度大于 10）。如果表单有效，请通过调用 control.setErrors(null) 清除各个错误。否则，return 一个自定义错误对象：{ 'atLeastOneInputFieldMustBeValid': true } 以便您稍后可以绑定到它。

    function alternativeRevenueGroupValidator(c: FormGroup) {
      let brandedContent = c.get('brandedContent');
      let typesOfBrands = c.get('typesOfBrands');
      let merchandise = c.get('merchandise');
      let typeOfMerchandise = c.get('typeOfMerchandise');
      let podcasts = c.get('podcasts');
      let podcastIdeas = c.get('podcastIdeas');
      let tours = c.get('tours');
      let tourIdeas = c.get('tourIdeas');
      let licensingDeals = c.get('licensingDeals');
      let licensingIdeas = c.get('licensingIdeas');

      if (brandedContent.valid || 
          merchandise.valid || 
          podcasts.valid || 
          tours.valid || 
          licensingDeals.valid ||
          typesOfBrands.valid ||
          typesOfMerchandise.valid || 
          postcastIdeas.valid ||
          tourIdeas.valid ||
          licensingIdeas.valid) {

          brandedContent.setErrors(null);
          merchandise.setErrors(null);
          podcasts.setErrors(null);
          tours.setErrors(null);
          licensingDeals.setErrors(null);
          typesOfBrands.setErrors(null);
          typesOfMerchandise.setErrors(null);
          postcastIdeas.setErrors(null);
          tourIdeas.setErrors(null);
          licensingIdeas.setErrors(null);
          return null;
        }
      }

      return {'GroupNoValue': true};
    }

在组验证器功能中，您可以灵活地检查组内任何控件的验证标志，设置任何一个控件的错误对象，最后您可以 return 任何验证对象设置任意数量的验证标志。

如果您需要至少两个字段，并且大于 10 个字符，您可以这样做：

function alternativeRevenueGroupValidator(c: FormGroup) {
      var validCtls = c.controls.filter(c=> c.valid);
      if (validCtls.length >= 2) {
           c.controls.forEach((t)=> t.setErrors(null));
           return null;
      }
      return {'GroupNoTwoValues': true};
}

如果组中的控件之一具有值，如何在 Angular 2 表单中进行简单的跨域验证以通过验证？

How to do simple cross field validation in Angular 2 form to pass validation if one of the control in group has value?

angular2-forms

angular

angular-reactive-forms