角度2反応形式は、オプションのいずれかが選択されている場合に、両方のドロップダウンを選択します。

Question

2つの選択ドロップダウンがあります。どちらもオプションフィールドです。しかし、これらの2つのうちの1つがそのオプションの1つを選択されている場合には、それらを両方とも必要とする必要があります。私はどこからでも探していますが、これはカスタムバリデーターであることはわかっていますが、オンラインのすべての例が必要なものに近くないので、どこから始めるべきかわかりません。

Answer 1

ピンを入力した場合、確認ピンは必ず（の逆の場合は）必要です。そうしないと、両方の必要な検証が不要になります。

コード：

this.UserForm = this.fb.group({ 
     .... 
     .... 
     security: this.fb.group({ 
      pin: [this.securityobj.pin], 
      confirmpin: [this.securityobj.confimrpin] 
     }, {validator: abhimatcher}) 

    }); 

のCustomValidator

export const customValidator= (control: AbstractControl): { [key: string]: boolean } => { 
    const initalText = control.get('pin'); 
    const requiredText = control.get('confirmpin'); 

    if (initalText || requiredText) 
     return null; 

    else 
     return { customValidate: true }; 
} 

HTML

 <form [formGroup]="UserForm" novalidate (ngSubmit)="onSubmit(UserForm)"> 
      ..... 
      ..... 
      <input type="password" class="form-group" formControlName="pin"> 
          <div *ngIf="UserForm.get('security').hasError('customValidate') && UserForm.get('security').get('pin').touched" class="text-danger"> 
           pin is required! 
          </div> 
         </div><br /> 
         <div> 
          <label class="center-block">ConfirmPin:</label> 
          <input type="password" class="form-group" formControlName="confirmpin"> 
         </div> 
         <div *ngIf="UserForm.get('security').hasError('customValidate') && UserForm.get('security').get('confirmpin').touched" class="text-danger"> 
          pin is required! 
         </div> 
     <button type="submit" class="btn btn-default" [disabled]="UserForm.invalid">Submit</button> 
</form>