これは非常に一般的に使用されているので、これにアプローチする簡単な方法が必要です！というわけで状況です。私はフォームグループを持っています:
<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})
私の目標は、select / ion-toggle のいずれかが true で、関連する入力フィールドが空ではなく、最小長が 10 を超える場合、from グループが検証されることです。[Validators.required, Validators.minLength(10)] をすべてのフィールドに追加すると、フォーム グループを検証する前にすべてのフィールドに入力する必要があります。そのうちの 1 つを検証して、グループ全体を検証したいだけです。どうやってやるの？
更新: これは、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};
}
ご覧のとおり、それは非常に醜いです。また、入力フィールドに値があるかどうかのみを検証できます。最小または最大の長さを評価することも、このようなライブラリを使用することもできません。ここにリンクの説明を入力してください。
FormGroupコンストラクターの 2 番目のパラメーターでは、カスタム グループ バリデーターを定義できます。
グループバリデーター内で、有効なフォームの条件が満たされているかどうかを判断します (つまり、少なくとも 1 つの入力フィールドが空でなく、フィールドの長さが 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};
}
グループ バリデーター関数内では、グループ内の任意のコントロールの検証フラグを柔軟に検査し、いずれかのコントロールのエラー オブジェクトを設定し、最終的に任意の数の検証フラグが設定された検証オブジェクトを返すことができます。
少なくとも 2 つのフィールドが必要で、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};
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加