角形の変更後（コンソールで）保存ボタンを無効にする

Question

言語、通貨、日付形式、金額形式の4つの古典的な角形を書いています。ここで は私の完全な.htmlのコードです：

<uib-tab index="1" heading="{{'GENERAL_SETTINGS_LABEL' | translate}}"> 
    <section class="general-settings"> 
    <div class="listing"> 
     <ul> 
     <li> 
      <label for="language">{{'LANGUAGE_LABEL' | translate}}</label> 
      <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
      <option value="en">{{'referencedata.languages.EN' | translate}}</option> 
      <option value="nl">{{'referencedata.languages.NL' | translate}}</option> 
      </select> 
     </li> 
     <li> 
      <label for="currency">{{'CURRENCY_LABEL' | translate}}</label> 
      <select id="currency" name="currency" ng-model="paramsGEN.cur.paramUserValue"> 
      <option value="EUR">EUR</option> 
      <option value="USD">USD</option> 
      <option value="GBP">GBP</option> 
      </select> 
     </li> 
     <li> 
      <label for="date-format">{{'DATE_FORMAT_LABEL' | translate}}</label> 
      <select id="date-format" name="date-format" ng-model="paramsGEN.date.paramUserValue">        
      <option value="dd/MM/yyyy">dd/MM/yyyy</option> 
      <option value="dd-MM-yyyy">dd-MM-yyyy</option> 
      <option value="MM/dd/yyyy">MM/dd/yyyy</option> 
      <option value="yyyy-MM-dd">yyyy-MM-dd</option> 
      <option value="MM-dd-yyyy">MM-dd-yyyy</option> 
      <option value="yyyy/MM/dd">yyyy/MM/dd</option> 
      </select> 
     </li> 
     <li> 
      <label for="amount-format">{{'AMOUNT_FORMAT_LABEL' | translate}}</label> 
      <select id="amount-format" name="amount-format" ng-model="paramsGEN.amt.paramUserValue"> 
      <option value="1 234 567,89">1 234 567,89</option> 
      <option value="1 234 567.89">1 234 567.89</option> 
      <option value="1.234.567,89">1.234.567,89</option> 
      <option value="1,234,567.89">1,234,567.89</option> 
      </select> 
      </li> 
      </ul> 
     </div> 
     </section> 
     <section class="controls"> 
      <div class="controls-wrapper"> 
      <button type="button" ng-click="saveGeneralParams();" class="apply bt">{{'APPLY_LABEL' | translate}}</button> 
      </div> 
     </section> 
    </uib-tab> 

私がやりたいことは、ユーザがコンソールを開いた場合ということである（F12ボタンや要素を検査）し、例えば面積の値を変更したい「言語」 とリスト内にない別の値。例えば、彼はコンソールを開き、次の行を変更：彼は保存ボタンをクリックして保存したい場合

<option value="sp"> <!--he puts "sp" rather than the initial "en"--> 

その後、私は無効にこのボタンを持っています。そして私は他の分野のためにそれを望んでいます。

どうすればいいのかわかりません。このhtmlファイルに初期値のチェックを追加することは可能ですか、それとも私のコントローラに特別な機能を追加する必要がありますか？

ありがとうございます！

Answer 1

各ngモデルに設定された値を確認するために独自の関数を記述し、その関数を使用して送信ボタンを無効にする必要があります（ng-disabled）。

私が何をしたいのか、HTMLに、ボタンで次に

app.controller('myCtrl', ['$scope',function($scope) { 
    $scope.validate = function() { 
     if($scope.paramsGEN.lan.paramUserValue === 'en' || $scope.paramsGEN.lan.paramUserValue === 'nl') { 
      return false; 
     } 
     return true; 
    } 
}]); 

<button type="button" ng-click="saveGeneralParams();" class="apply bt" ng-disabled="validate()">{{'APPLY_LABEL' | translate}}</button> 

Answer 2

のように、ユーザーがコンソールを開いた場合ということです何か（F12ボタン と要素を検査）と の例の 'Language'の領域の値をリストにない別の値で変更したいとします。 例えば、彼はコンソールを開き、この行を変更：彼は、保存ボタンをクリックして保存したい場合は、

を、私は 、このボタンを無効にする必要があります。そして私は他の分野のためにそれを望んでいます。

Javascriptはクライアント側です。クライアント側からは、スマートユーザーや悪意のあるユーザーがコントロールを無効にしたり、一部のオブジェクトを変更したり、受け入れられないと考えられるデータを要求にサーバーに送信したりすることがありません。
JavaScriptのlibとプラクティスによっては、悪意のあるユーザーの動作がより困難になることがありますが、常に制限されます。

単一の実際の保護はサーバー側から行われます。いくつかの処理を保護する必要があると判断した場合（ここでは有効な値）、サーバ側でチェックを行う必要があります。

---

更新：コメントで尋ねたソリューション

アイデアは、あなたが$scope controller内の変数にマップボタンのng-disabled属性で遊んでいます。
提出された言語が問題なければ問題はありません。それ以外の場合は処理を終了し、変数を介して$scope controllerにボタンを無効にします。

<button ng-disabled="isDisabled" type="button" 
     ng-click="saveGeneralParams();" class="apply bt" ></button> 

をそしてsaveGeneralParams()の先頭に追加します：

ので、ボタンでng-disabled属性を追加するには、してくださいそのために必ず

$scope.saveGeneralParams = function() { 
     if($scope.paramsGEN.lan.paramUserValue != 'en' && $scope.paramsGEN.lan.paramUserValue != 'nl') { 
      $scope.isDisabled = true; 
      return; 
     }