CODEWITHSUNDEEP
angularjsforms
salamanka44
salamanka44

Reputation: 944

Disable save button after modification (in a console) in angular form

I have write a classical angular form with 4 areas : Language, Currency, Date format and Amount format. Here is my full .html code :

<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>

What I want to do is that if the user opens the console (F12 button and inspect elements) and wants to change the value of an area for example 'Language' with another value that is not in the list. For example, he opens the console and change this line :

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

Then, if he wants to save by clicking the save button, I have to disable this button. And I want to that for the other areas.

I have no idea how can I do that. Is it possible to add a check for the initial value in this html file or do I have to add a special function for that in my controller???

Thank you in advance !!

Upvotes: 0

Views: 735

Answers (2)

Paulson Peter
Paulson Peter

Reputation: 574

You need to write your-own function to check the value set on each ng-model, then use that function to disable the submit button (ng-disabled).

Something like

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

Then in your button in html

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

Upvotes: 1

davidxxx
davidxxx

Reputation: 131356

What I want to do is that if the user opens the console (F12 button and inspect elements) and wants to change the value of an area for example 'Language' with another value that is not in the list. For example, he opens the console and change this line :

Then, if he wants to save by clicking the save button, I have to disable this button. And I want to that for the other areas.

Javascript is client-side. From client-side, you could never be sure to prevent a smart or malicious user to disable some controls, modify some objects or send to server a request with data you consider as unacceptable.
Some Javascript lib and practices may make harder malicious user behaviors but it would be always limited.

The single real protection comes from server-side. If you deem that some processing must be secured (here valid values), you should do the check in the server-side.

update : asked solution in comment

The idea is playing with ng-disabled attribute of button that you map to a variable in $scope controller.
If the submitted language is acceptable, no problem, otherwise, we leave the processing and we disable the button via the variable in $scope controller.


So, add ng-disabled attribute in the button:

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

And add at the beginning of saveGeneralParams() :

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

Upvotes: 1

Related Questions