サファリでドロップダウンが期待どおりに機能していませんか？

Question

私は角2プロジェクト

<div class="form-group"> 
         <label for="vendors">Vendors</label> 
         <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required> 
          <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option> 
         </select> 
       </div> 

これはクロムで正常に動作しますが、私は何も選択していない場合でも、ページがロードされたサファリ、でそれを開いたときに選択され、それは最初のものを示しているが、場合のドロップダウンを持っています私はそれを示す提出をクリックすると、このfeildは必須です。

実際には、最初のアイテムが選択されていますが、実際には選択されていません。これを修正するには？

Answer 1

これは角度の問題ではありませんが、これはsafari/mobile safariのデフォルトの動作です。簡単な解決策/回避策を以下に示します。

あなたのような他のオプションボックスを追加する場合：

<option disabled selected value> --Select-- </option> 

次に、あなたのコードは次のようになります。ユーザーが行った後、あなたが最初の「選択」ボックスを再選択することはできません

<div class="form-group"> 
    <label for="vendors">Vendors</label> 
    <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required> 
     <option disabled selected value> --Select-- </option> 
     <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option> 
    </select> 
</div> 

この方法有効な選択、回答はthis answerから取得しました。