AngularJS - ng-model値があらかじめ入力されている入力に対して$ pristineのバグがある場合は無効にする

Question

ng-modelを使用してオブジェクトのjsonプロパティからの値で事前入力された入力フィールドがあり、この入力が空の場合はボタンが最初に、または値が無効です。

これは機能しますが、入力ボックスにデータが既に入力されている状態でページが読み込まれると、有効な値があっても入力は処理されていないため、$ pristineとして扱われます。したがって、有効な値のために有効にする必要があるボタンは、まだ無効です。

私は$手付かずの状態を変更することができます（personalDetailsForm.niNumber。$手付かず& & personalDetailsForm.niNumber。$の無効）、入力中に予め充填された値があるときに正しくロード上のボタンを有効にしますが、もしあらかじめ入力された値は削除され、入力は無効として扱われません。

これを回避する手段はありますか？

HTML：

<div input-field class="input-field col-xs-12 col-sm-6 col-md-2"> 
    <input id="niNumberInput" name="niNumber" type="text" class="validate" pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="niNumber"> 
    <label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label> 
</div> 
<div input-field class="input-field col-xs-12 col-sm-6 col-md-1"> 
    <button data-ng-click="verifyNINumber()" data-ng-disabled="personalDetailsForm.niNumber.$invalid || personalDetailsForm.niNumber.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button> 
</div> 

Answer 1

あなたはフォームが自然のままであることと同時に無効であることを確認するために別のチェックを追加することができます。 この方法では、フォームが無効である場合はボタンが無効になり、フォームが初期ではあるが無効である場合は無効になります。

ng-disabled=personalDetailsForm.niNumber.$invalid || (personalDetailsForm.niNumber.$pristine && personalDetailsForm.niNumber.$invalid)

Answer 2

問題は、要素にその作業罰金をrequired属性を追加する場合は、あなたのpattern属性の正規表現は、それゆえボタンが有効になっている空の入力フィールドを処理しないということです。後

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="niNumber"> 

：：前

要素名とその同じではない場合

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="test" required> 

はまた、その優れたng-modelに別の変数名を使用してください。問題の修正は、で処理されない空の入力要素をチェックするrequired属性を追加することです。

代替ソリューション（推奨）：

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
ng-maxlength="9" ng-minlength="9" placeholder="{{niNumber}}" data-ng-model="test" required> 

上記のコードは、あなたの正規表現と同じ仕事をしていませんが、その用途だけ角度検証し、その理解する方がはるかに簡単：P

見つけてください。ソリューションのデモの下で

JSFiddle Demo