Only one editable-text to be opened at same time

[bmickoski]

I am adding editable-text inside ng-repeat. With current code I am able to open all editable-text fileds at same time. What I need is when I open one editable-text field others to be disabled till I not close the open one(click on Save button). Take a note that I have one editable-text and one editable-select, so when i click on editable-text both editable-text and editable-select are opened which is good, but if i click on second editable-text both editable-text and editable-select are opened which is not good cause previous ones are still open.

<div class="table-inline-group">
                        <form editable-form name="editableHours">
                            <div class="text-left col-md-9">
                                <div class="text-left col-md-5">
                                    <a data-ng-if="reviewEditMode && (isCoordinator || (isReviewer && isCurrent))" class="clickable" editable-text="phase.hours" e-step="any" e-name="Hours" e-min="0" ng-click="editableHours.$show(); edit = true" ng-show="!editableHours.$visible">
                                        <div ng-if="phase.hours" data-ng-bind-html="phase.hours"></div>
                                        <span data-ng-if="!phase.hours">0</span>
                                    </a>
                                    <div data-ng-if="!reviewEditMode || (!isCoordinator && (isReviewer && !isCurrent))"> {{phase.hours}}</div>
                                </div>
                               <div class="text-left col-md-3">

                                    <a ng-if="reviewEditMode" class="clickable" editable-select="phase_Mins" onbeforesave="getPhaseHours(phase)" onaftersave="updateHours($data, phase)" e-name="Hours" e-form="editableHours" e-ng-options="m.value as m.value for m in phaseMins" ng-click="editableHours.$show(); edit = true" ng-show="!editableHours.$visible" data-ng-disabled="!reviewEditMode">                                        
                                    </a>
                                </div>
                                <div class="text-left col-md-4">
                                    <span ng-show="editableHours.$visible">
                                        <button type="submit" class="btn btn-sm btn-warning save-edit ml5" ng-disabled="editableHours.$waiting || editableHours.details.$error.taMaxText">
                                        Save
                                        </button> 
                                    </span>
                                </div>
                            </div>
                        </form>
</div>

[bmickoski]

If I remove form tag and use e-form for both only can be open at time but now when i click on editable-text only editable-text is shown without editable-select and Save button is not overriden.

<div class="table-inline-group">
                      <div class="text-left col-md-9">
                                <div class="text-left col-md-5">
                                    <a data-ng-if="reviewEditMode && (isCoordinator || (isReviewer && isCurrent))" class="clickable" editable-text="phase.hours" e-step="any" e-name="Hours" e-min="0" e-form="editableHours" ng-click="editableHours.$show(); edit = true" ng-show="!editableHours.$visible">
                                        <div ng-if="phase.hours" data-ng-bind-html="phase.hours"></div>
                                        <span data-ng-if="!phase.hours">0</span>
                                    </a>
                                    <div data-ng-if="!reviewEditMode || (!isCoordinator && (isReviewer && !isCurrent))"> {{phase.hours}}</div>
                                </div>
                                <div class="text-left col-md-3">

                                    <a ng-if="reviewEditMode" class="clickable" editable-select="phase_Mins" onbeforesave="getPhaseHours(phase)" onaftersave="updateHours($data, phase)" e-name="Hours" e-form="editableHours" e-ng-options="m.value as m.value for m in phaseMins" ng-click="editableHours.$show(); edit = true" ng-show="!editableHours.$visible" data-ng-disabled="!reviewEditMode">           

                                    </a>
                                </div>
                                <div class="text-left col-md-4">
                                    <span ng-show="editableHours.$visible">
                                        <button type="submit" class="btn btn-sm btn-warning save-edit ml5" ng-disabled="editableHours.$waiting || editableHours.details.$error.taMaxText">
                                        Save
                                        </button> 
                                    </span>
                                </div>
                            </div>
                  </div>

[ckosloski]

Did you try using the edit-disabled attribute?

[bmickoski]

Hey @ckosloski well how can I use edit-disabled? I mean because I have ng-repeat inside ng-repeat how to add condition in ng-disabled that some form is opened?

[ckosloski]

There is a $visible property of the form

Maybe you need to create a plnkr/jsfiddle showing your issue (I might not be understanding what you want)

[bmickoski]

Hey @ckosloski here is plunker :

https://plnkr.co/edit/5aZ1v9qsxivyiUvlNVed?p=preview

Somehow I cannot fix editable-text to be open, when clicking on some hour form x-editalbe should be shown. Basically what I want is if I open any editable text in some table in every other table x-editable fields to be disabled.

[ckosloski]

Based on the data in your plnkr:

Do you want just one item in edit under "One, Coordinator Total Hours" or all items in edit? And then if something is in edit under "One, Coordinator Total Hours", does that mean nothing is editable in "BAKER, DAWN A Total Hours"

[bmickoski]

Hey @ckosloski yeaaah if one item on One, Coordinator is in edit more, nothing is editable in all other tables, that means also in One, Coordinator other cannot be editable.

[ckosloski]

There is the "minutes" field missing from my screenshot. So, you want to be able to edit the hours/minutes for one row at a time, is that correct?

[bmickoski]

Yup that is correct.

[ckosloski]

Check out this plunker, I think it gets you on the way to what you want.

[bmickoski]

Hm.. yeah this is good only one at time can be open with this implementation. Just curious if there is some attribute from x-editable that can check if some form is open so others will be disabled (with edit-disabled) condition. If not I suppose maybe in controller I can check if some form have $visible true already and not show() clicked field. Thanks.

[bmickoski]

Hey @ckosloski I don't want to open new issue, will ask you here. How can i restrict user to be able o type only numbers in editable-text? I don't want to use editable-number cause I am getting strings as numbers from back end and when open editable field I am getting error that expects to be number. I tried adding e-ng-patter="regexForOnlyNumbers" but user is still allowed to type strings, characters etc...

 <a data-ng-if="reviewEditMode && (isCoordinator || (isReviewer && isCurrent))" class="clickable" e-ng-pattern="onlyNumbersPattern" editable-text="phase.hours" e-step="any" e-name="Hours" e-min="0" ng-click="openForm($index, 'editableHours');" ng-show="!$parent.editableHours{{$index}}.$visible">
                                        <div ng-if="phase.hours" data-ng-bind-html="phase.hours"></div>
                                        <span data-ng-if="!phase.hours">0</span>
                                    </a>

pattern: $scope.onlyNumbersPattern = /^\d+$/;

[ckosloski]

I see ngPattern working. It doesn't prevent values, it marks the field as invalid. If you want to prevent the value, you would have to do something with onkeyup/down/change to do something if a non number is entered. There is a shown attribute on the form.

[bmickoski]

Thanks @ckosloski will close issue now.

[bmickoski]

Hey @ckosloski I have one question, maybe you are familiar with this. Editable-number in IE is allowing user to enter non-numeric values, in Chrome and FF is good, user can enter only numbers (also decimal numbers). Because of this i want to use ng-pattern to allow only numbers but it seems that IE is allowing even with ng-patter user to enter non-numeric values and we don't have error in form... Maybe this is because i am using editable-form instead of e-form or that does not make any difference?

$scope.numbersOnly = /[0-9]+$/;

  <form editable-form name="$parent.editableCosts{{$index}}">
                        <div class="text-left col-md-9">
                             <span class="text-danger col-md-3" ng-show="$parent.editableCosts{{$index}}.costs.$error.pattern || $parent.editableCosts{{$index}}.costs.$error.number">
                                Enter a valid number
                            </span>
                            <div class="text-left col-md-4">
                                <a data-ng-if="reviewEditMode && hasPermissions" e-ng-pattern="numbersOnly" class="clickable" editable-number="phase.costs" e-step="any" e-name="costs" e-min="0" e-max="99999999999" onaftersave="updateCosts($data, phase, 'editableCosts')" ng-click="openForm($index, 'editableCosts', phase);" ng-show="!$parent.editableCosts{{$index}}.$visible">
                                    <div ng-if="phase.costs"> {{ phase.costs | currency:"$":0}}</div> <span data-ng-if="!phase.costs">0</span> </a>
                                <div data-ng-if="!reviewEditMode || noPermissions">{{!phase.costs ? '0.00' : phase.costs | currency:"$":0}}</div>
                            </div>
                            <div class="text-left col-md-2">
                                <span ng-show="$parent.editableCosts{{$index}}.$visible">
                                    <button type="submit" class="btn-sm btn-info save-travel-edit ml5" ng-disabled="$parent.editableCosts{{$index}}.$waiting || $parent.editableCosts{{$index}}.costs.$error.pattern || $parent.editableCosts{{$index}}.costs.$error.number">                                         Save
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>

So when i check in updateCosts function for this current form $erros is empty objects for $parent.editableCosts{{$index}}.costs.$error...

[ckosloski]

What version of IE and what non-numeric values are you seeing it allow? Unfortunately xeditable doesn't have access to the errors object. You could do an onbeforesave function that validates the value and stops form submission if the value is invalid.

[bmickoski]

Iternet Explorer 11 (Version 11.633.10586.0). It allows all alphabets and also all characters (and i need only '.' to allow). So maybe as you said on onbeforesave function i can check with pattern in this function and stop submission if value is not valid...

[ckosloski]

@BukicMicko did you solve your issue?

[bmickoski]

Hey @ckosloski yes i resolve it with onbeforesave function. Somehow I forgot to close the issue.. Sorry for that.