Angular 2如果選擇了其中一個選項，則需要選擇兩個下拉菜單

Question

我有2個選擇下拉菜單。兩者都是可選字段。不過，如果其中一個選擇了其中一個選項，我需要這兩個選項。我到處尋找，我知道這將是一個自定義驗證器，但我不知道從哪裏開始，因爲所有在線示例都不符合我的需求。

Answer 1

讓我們假設您是否輸入PIN碼，confirmmpin是必須的（反之亦然）否則無需對兩者進行必要的驗證。

代碼：

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>