2つのフィールドのどちらかが必要な場合に角2のカスタムバリデーターが必要です。

Question

カスタムバリデーター機能を実装して、電話番号（自宅電話と携帯電話）のいずれかを入力しようとしています。私は両方のフィールドにエラーメッセージを表示し、両方がタッチされ、有効な値を持たない場合、何らかの理由で私のコードが予期したとおりに動作しません。この作品で私を助けてください。 - ありがとう！ ここstackblitzリンクhttps://stackblitz.com/edit/angular-ve5ctu

createFormGroup() { 
    this.myForm = this.fb.group({ 
    mobile : new FormControl('', [this.atLeastOnePhoneRequired]), 
    homePhone : new FormControl('', [this.atLeastOnePhoneRequired]) 
    }); 
} 

atLeastOnePhoneRequired(control : AbstractControl) : {[s:string ]: boolean} { 
    const group = control.parent; 
    if (group) { 
    if(group.controls['mobile'].value || group.controls['homePhone'].value) { 
     return; 
    } 
    } 
    let errorObj = {'error': false}; 
    return errorObj; 
} 

Answer 1

代わりの各formControlのバリデータをマーキングされ、電話番号のネストされたグループを作成し、そのグループにバリデータを適用します。このサンプルでは、​​バリデーターをフォーム全体に適用します。

また、バリデーターを適用する場合、フィールドが有効なときにnullを返す必要があります。

また、角材を使用しているため、を表示するには、ErrorStateMatcherを追加する必要があります。 mat-errorsは、バリデーターがフォームグループではなくフォームコントロールに設定されている場合にのみ表示されます。

あなたのコードは、以下のようになります

：

createFormGroup() { 
    this.myForm = this.fb.group({ 
    mobile : new FormControl(''), 
    homePhone : new FormControl('') 
     // our custom validator 
    }, { validator: this.atLeastOnePhoneRequired}); 
} 

atLeastOnePhoneRequired(group : FormGroup) : {[s:string ]: boolean} { 
    if (group) { 
    if(group.controls['mobile'].value || group.controls['homePhone'].value) { 
     return null; 
    } 
    } 
    return {'error': true}; 
} 

をエラー状態マッチャ：

あなたがコンポーネントにマークし

export class MyErrorStateMatcher implements ErrorStateMatcher { 
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { 
    const controlTouched = !!(control && (control.dirty || control.touched)); 
    const controlInvalid = !!(control && control.invalid); 
    const parentInvalid = !!(control && control.parent && control.parent.invalid && (control.parent.dirty || control.parent.touched)); 

    return (controlTouched && (controlInvalid || parentInvalid)); 
    } 
} 

：

matcher = new MyErrorStateMatcher(); 

し、それをマーク両方の入力フィールドでテンプレートに追加します。また、検証メッセージを表示するための*ngIfがどのように見えるか注意してください。

<mat-form-field> 
    <input matInput placeholder="Mobile" formControlName="mobile" [errorStateMatcher]="matcher"> 
    <mat-error *ngIf="myForm.hasError('error')"> 
    "Enter either phone number" 
    </mat-error> 
</mat-form-field> 
<mat-form-field> 
    <input matInput placeholder="Home Phone" formControlName="homePhone" [errorStateMatcher]="matcher"> 
    <mat-error *ngIf="myForm.hasError('error')"> 
    "Enter either phone number" 
    </mat-error> 
</mat-form-field> 

StackBlitz