disable external button in angularJs when form is invalid

Question

I have a form in angular js and a button (angular material md-button) outside of the form. I want to disable the button when the form is invalid but access the form from outside is seems impossible :(

note: I try form attribute for my button and ng-disabled="secFoundedFormId.$invalid" but this expression outside of the form seems unsuspected!

Any help is appreciated

Here is my summarised code :

<form flex="100" ng-if="secretaryFound" name="secFoundedForm" id="secFoundedFormId">
                    <!-- my required input -->
                    <div class="disabledInputMargin" flex="95" flex-xs="100" layout="row"
                         layout-align="start start">
                        <md-icon class="zeroMargin" style="color:{{DashboardParams.iconColor2}};">
                            person
                        </md-icon>
                        <md-select class="zeroMargin" flex="100" flex-xs="100" required
                                   ng-model="form.workplaceLableId"
                                   name="mahaelekar"
                                   placeholder="{{'WORKPLACE' | translate}}">
                            <md-option ng-repeat="workplace in workplaceLableList"
                                       value="{{workplace.id}}">
                                {{workplace.addressLable}}
                            </md-option>
                        </md-select>
                    </div>                       
</form>
****{{secFoundedForm.$invalid}}***   <!-- this is not show enything -->
<div style="padding: 0">
    <div flex="100"
         layout="row"
         layout-xs="column"
         layout-align="end stretch">
        <!-- my button is below -->
        <md-button ng-if="secretaryFound" ng-click="inviteSecretary();"
                   name="secFoundedFormId"
                   form="secFoundedFormId"
                   style="background-color:{{DashboardParams.iconColor2}};color: white"
                   ng-disabled="secFoundedForm.mahaelekar.$invalid"
                   flex="20" flex-xs="100">
            {{'INVITE' | translate}}
        </md-button>
        <md-button ng-click="backToSecretary();" style="background-color: #9d9d9d;color: white"
                   flex="20" flex-xs="100">
            {{'BACK' | translate}}
        </md-button>
    </div>
</div>
</div>

@Saniyasyedqureshi I try this, but it's not working. because of the expression secFoundedForm.$invalid, not defined out of the form scope. — Sr7, Dec 13 '19 at 17:57

score 1 · Accepted Answer · answered Dec 14 '19 at 13:08

You are using ng-if on your form tag. ng-if will create an isolated child scope and it removes the element from the DOM when the condition is false and only adds the element back once the condition turns true, while ng-show just toggle the appearance of the element by adding the CSS display: none style. It's better to use ng-show in these situations that you need the inner values inside the container using ng-if to enable or disable something. you can read this for more information.

Solved! :) Thanks a lot, my friend! – Sr7 Dec 21 '19 at 08:43 — Sr7, Dec 21 '19 at 08:43

disable external button in angularJs when form is invalid

1 Answers1