그룹의 컨트롤 중 하나에 값이있는 경우 유효성 검사를 통과하기 위해 각도 2 형식으로 간단한 교차 필드 유효성 검사를 수행하는 방법?

Question

이것은 매우 일반적으로 사용되므로이를 접근 할 수있는 간단한 방법이 있어야합니다! 여기 상황이 있습니다. 선택/이온 토글 중 하나에 해당하는 경우 및

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

가 내 목표는, 관련 입력

을 제출 : 여기

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

그리고 구성 요소의 양식 그룹이다 : 나는 양식 그룹이 비어 있지 않고 최소 길이가 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}; 
     } 

아시겠지만 VERY UGLY입니다. 그리고 입력 필드에 값이 있는지 여부 만 확인할 수 있습니다. 최소 길이 나 최대 길이를 구할 수 없으며 이와 같은 라이브러리를 사용할 수 없습니다. 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}; 
    } 

, 당신은 그룹 내 모든 컨트롤의 유효성 검사 플래그를 검사 할 수있는 유연성을 가지고, 컨트롤 중 하나의 오류 개체를 설정, 그리고 마지막으로 당신은 어떤 어떤 검증 객체를 반환 할 수 있습니다 유효성 검증 플래그 세트 수. 그것은 당신처럼 보인다

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