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>

这是组件中的Form组：

   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})

我的目标是，如果其中一个选择/离子切换为真，并且相关的输入字段不为空并且最小长度超过10，则验证来自组。如果我将[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)清除个别错误。否则，返回自定义错误对象：{ '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};
    }

在组验证器函数中，您可以灵活地检查组中任何控件的验证标志，设置任何一个控件的错误对象，最后可以返回任何验证对象的任何验证对象集。

如果您需要至少两个字段以及超过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表单中进行简单的交叉字段验证以通过验证？

1 个答案: