Firefoxで正しく動作しない動的フォームFirefox

Question

私はIonic（Angular）を使用しています。ユーザーが必要なフィールドをすべて入力してエラーラインを表示するかどうかを確認するフォームがあります。 「送信」ボタンは、必要に応じてすべてのフィールドが入力されるまで無効になります。また、 "date"フィールドはカレンダーから日付を選択することができるようになっています（入力の "date"形式から来ています）。

この動作はChromeでは完全に機能していますが、Firefoxではフォームが入力されてもボタンは無効のままです。私はjsFiddleの例を再現するのに苦労したので、問題のスクリーンショットをいくつか撮った。 Firefoxの上のクロム

で

HTML：

<form name="signupForm" class="signupForm" novalidate="" ng-controller="formCtrl"> 
    <div class="list"> 
     <p ng-show="signupForm.email.$error.required && !signupForm.email.$pristine" style="color:red;">* Enter an email.</p> 
     <label class="item item-input" ng-class=""> 
      <input type="email" name="email" ng-model="email" placeholder="Email address" required> 
     </label><br/> 
     <p ng-show="signupForm.firstname.$error.required && !signupForm.firstname.$pristine" style="color:red;">* Enter a name.</p> 
     <label class="item item-input"> 
      <input type="text" name="firstname" ng-model="firstname" placeholder="First Name" required> 
     </label><br/> 
     <p ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" style="color:red;">* Enter a password.</p> 
     <label class="item item-input"> 
      <input type="password" name="password" ng-model="password" ng-minlength="8" ng-maxlength="20" placeholder="Password" required> 
     </label><br/> 
     <p style="text-align:left; margin-left:4%;">Birth date:</p> 
     <p ng-show="signupForm.date.$error.required && !signupForm.date.$pristine" style="color:red;">* Enter a birth date.</p> 
     <label class="item item-input"> 
      <input type="date" name="date" ng-model="date" required><br/> 
     </label><br/> 

     <p style="text-align:left; margin-left:4%;">Gender :</p> 
     <div class="gender"> 
      <select name="gender" ng-model="gender" required> 
       <option value="female">Female</option> 
       <option value="male">Male</option> 
      </select> 
     </div><br/> 
    </div> 
    <button class="button button-round button-assertive" type="submit" ng-disabled="signupForm.$invalid" ng-click="submitSignup(email, firstname, password, dateBorn, gender)">Signup</button><br/> 
</form> 

JSコードはデータベースにユーザーを登録しているので、私はJSコードを投稿する必要はありません。ここで問題はフォーム自体から来ているように見えますが、無効にしたボタンで送信することは不可能であるため、送信後に何が起こるかはわかりません。

問題が「gender」divから来ていると思われます。なぜなら、それがなければ正常に動作するように思えますし、私の実装がフォームに「select」を挿入する最良の方法であるとは確信していません。私はここで間違って何をしていますか？

Answer 1

input dateはFirefoxではサポートされていません。 Firefoxはそれらをinput textに変換します。だから、角度はフィールドが無効だと思うのです。日付入力用Angular docsから

<select name="dob_year" ng-model="dob.year" required> 
    <option>2017</option> 
    <option>2016</option> 
    <option>2015</option> 
    <option>2014</option> 
    <option>...</option> 
</select> 

<select name="dob_month" ng-model="dob.month" required> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>...</option> 
</select> 

<select name="dob_day" ng-model="dob.day" required> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>...</option> 
</select> 

Answer 2

：私はあなたの日付の<select>要素を使用することをお勧め

まだHTML5の日付入力をサポートしていませ ないブラウザでは、テキスト要素が使用されます 。その の場合、有効なISO-8601日付形式 （yyyy-MM-dd）でテキストを入力する必要があります（例：2009-01-06）。

多くの近代的なブラウザでは、まだこの入力タイプをサポートし していないので、プレースホルダまたはラベルを経由して、予想される入力フォーマット上の ユーザーへの手がかりを提供することが重要です。

はここで日付の入力をサポートしていないものも含め、すべてのブラウザ上で動作日付入力の例です：

angular.module('dateInputExample', []) 
 
    .controller('DateController', ['$scope', function($scope) { 
 
    $scope.example = { 
 
     value: new Date(2013, 9, 22) 
 
    }; 
 
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 

 
<form name="myForm" ng-app="dateInputExample" ng-controller="DateController as dateCtrl"> 
 
    <input type="date" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" required/> 
 

 
    <div role="alert"> 
 
    <span class="error" ng-show="myForm.input.$error.required">Required!</span> 
 
    <span class="error" ng-show="myForm.input.$error.date">Not a valid date!</span> 
 
    </div> 
 

 
    <tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/> 
 
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> 
 
</form>

あなたの日付形式を維持したい場合は、日付入力を使わずにAngularUI datepickerを使用することをお勧めします。