Angular: Prevent editing input field on page edit

Question

I'm using an Angular file for both my create and edit page, but was wondering if there's a way to prevent a user editing the name of a Geo Segment on the /edit page.

enter image description here

geo-region-detail.html:

<nav>
    <a href="#">Geo Segments</a> :
  </nav>

  <h1 class="geo-region-name">{{ geoRegion.name || 'Create Geo Segment' }}</h1>
  <form ng-submit="updateOrAddGeoRegion()" id="regionForm">

    <div class="row">
      <div class="control-group span2">
        <label class="control-label label-unstyled font-size-14" for="inputId">Label</label>
        <div class="controls">
          <input type="text" id="inputId" placeholder="Short name" class="input-small" value="{{ geoRegion.label }}" ng-model="geoRegion.label" required="required">
        </div>
      </div>
      <div class="control-group span4">
        <label class="control-label label-unstyled font-size-14" for="inputName">Name</label>
        <div class="controls">
          <input type="text" id="inputName" placeholder="Region Name" class="input-large" value="{{ geoRegion.name }}" ng-model="geoRegion.name" required="required">
        </div>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label label-unstyled font-size-14" for="inputAddress">Address</label>
      <div class="controls">
        <input type="text" id="inputAddress" placeholder="Address" class="input-xlarge" value="{{ geoRegion.address }}" ng-model="geoRegion.address">
        <google-map-geocoder></google-map-geocoder>
      </div>
    </div>

location-edit.js:

$scope.newGeoRegion = true
$scope.geoRegionId = ''
$scope.hours = Hours


console.log('$scope.hours', $scope.hours)

$scope.geoRegion = {
  app_id: $scope.app_id
  geoRegion_id: '',
  latitude: 37.7879938,
  longitude: -122.40743739,
  name: '',
  address: '',
  radius: 500,
  customer_id: $scope.customer_id,
  active_daily_clear: false
}

Should I assume that if the geoRegion_id is filled in, that you're editing, otherwise you're creating? If so, add an attribute to your name textbox like ng-disabled="geoRegion.geoRegion_id". Also, is there any reason you are setting the value attributes for the textboxes? ng-model should handle that for you — Ian
– Ian, Commented Jul 31, 2014 at 3:15
Hi Ian, yes that's correct. If geoRegion_id is filled in, it's editing. The ng-disabled hasn't worked for me though :( Any chance you could show me an example of that in a jsfiddle, as I couldn't get it working? <label class="control-label label-unstyled font-size-14" for="inputName">Name</label> <div class="controls"> <input type="text" id="inputName" placeholder="Region Name" class="input-large" ng-disabled="geoRegion.geoRegion_id" value="{{ geoRegion.name }}" ng-model="geoRegion.name" required="required"> </div> — Ryan Drake
– Ryan Drake, Commented Jul 31, 2014 at 3:25
Are there alternative ways to disable the input field on /edit? — Ryan Drake
– Ryan Drake, Commented Jul 31, 2014 at 3:39
Sure, here's an example: jsfiddle.net/LzfQC . Note how the textbox can't be focused/edited (because the geoRegion_id property has a value). Change the geoRegion_id property to an empty string, click the "Run" button at the top, and then notice how the textbox is editable. — Ian
– Ian, Commented Jul 31, 2014 at 3:45

bhantol · Accepted Answer · 2014-07-31 06:15:07Z

3

Exactly as per @Ian but improved for '' value an other reasons

ng-disabled="isEdit(geoRegion)"

then in the controller

 $scope.isEdit = function(geoRegion) {

            if (angular.isUndefined(geoRegion.geoRegion_id))
                return true;
            if (geoRegion.geoRegion_id == '') 
                return true;

            return false;
 };

If you decide to use a different way to detect the edit your isEdit() fn is good enough to shield that change from the View (html)

answered Jul 31, 2014 at 6:15

bhantol

9,6368 gold badges48 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Prevent editing input field on page edit

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related