0

I have 4 angular forms, and a save button

save button

<div class="col-sm-2">
    <button class="btn btn-sm btn-primary pull-right admin-hide mb10" ng-show="showSaveBtn == true" ng-click="checkSaveBtn()">Save</button>
</div>

4 forms

{{-- WiFi Includes --}}
@if($section == "private")
    <div ng-form="private2" name="p24Form" ng-show="freqSelect == '2.4'" novalidate>
        @include('views.settings.wifi.private2')
    </div>
    <div ng-form="private5" name="p50Form" ng-show="freqSelect == '5'" novalidate>
        @include('views.settings.wifi.private5')
    </div>
@elseif($section == "guest")
    <div ng-form="guest2" name="g24Form" ng-show="freqSelect == '2.4'" novalidate>
        @include('views.settings.wifi.guest2')
    </div>
    <div ng-form="guest5" name="g50Form" ng-show="freqSelect == '5'" novalidate>
        @include('views.settings.wifi.guest5')
    </div>
@endif

I am trying to detect and show my save button as soon as one of those 4 forms got changed.

I've tried 

$scope.showSaveBtn = false;
$scope.checkSaveBtn = function() {

    if (

        $scope.p24Form.$dirty ||
        $scope.g24Form.$dirty ||
        $scope.p50Form.$dirty ||
        $scope.g50Form.$dirty

        ) {

        $scope.showSaveBtn = true;
    }else{
        $scope.showSaveBtn = false;
    }
}


console.info('$scope.showSaveBtn = ', $scope.showSaveBtn);

Result

$scope.showSaveBtn kept returning false ...

Why does it keep returning false ? What did I do wrong ?

How would one go about and debug this further?

Note

ngChange-like functionality for the entire form

is not answering my post. According to the link, people using tag, but in my case I used tag with ng-form attribute, the way we use to check it might be slightly different.

code-8
  • 54,650
  • 106
  • 352
  • 604
  • Possible duplicate of [ngChange-like functionality for the entire form](https://stackoverflow.com/questions/28677638/ngchange-like-functionality-for-the-entire-form) – Saksham Jun 19 '17 at 19:43
  • I'm not sure that `checkSaveBtn` is meant to be bound to the ng-click event. Shouldn't it be set on `ng-change` of the inputs ? – Julien TASSIN Jun 19 '17 at 19:45
  • @Saksham : According to your link, people using `
    ` tag, but in my case I used `
    ` tag with `ng-form` attribute, the way we check it might be slightly different.
     – code-8 Jun 19 '17 at 19:59
  • @JulienTASSIN : Okay, I will try `ng-change` and will update you the result. – code-8 Jun 19 '17 at 20:00
  • @JulienTASSIN : Result when I used `ng-change` - I got - `Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!` – code-8 Jun 19 '17 at 20:03
  • oups sorry, I didn't see that you don't have ng-model. – Julien TASSIN Jun 19 '17 at 20:07
  • Your ng-change function is never called. This is because you set the ng-click to handle the changes. You have to call that function somewhere such as in a $scope.$watch or somewhere on the form. – ITDerrickH Aug 02 '17 at 16:05
  • You could possibly try something like this... `$scope.$watch('[p24Form.$dirty,g24Form.$dirty,p50Form.$dirty,g50Form.$dirty]', function () { $scope.checkSaveBtn(); }, true);` – ITDerrickH Aug 02 '17 at 16:08

0 Answers0