当表单无效时禁用angularJs中的外部按钮答案

【问题标题】：disable external button in angularJs when form is invalid当表单无效时禁用angularJs中的外部按钮
【发布时间】：2020-04-05 13:26:19
【问题描述】：

我有一个 angular js 表单和一个表单外的按钮（angular material md-button）。我想在表单无效时禁用按钮，但从外部访问表单似乎是不可能的:(

注意：我为我的按钮和 ng-disabled="secFoundedFormId.$invalid" 尝试了表单属性，但表单之外的这个表达式似乎没有被怀疑！

感谢任何帮助

这是我总结的代码：

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

【问题讨论】：

参考stackoverflow.com/a/28829391/5995973
@Saniyasyedqureshi 我试试这个，但它不起作用。因为表达式 secFoundedForm.$invalid，没有定义在表单范围之外。

标签： html angularjs forms button angular-material

【解决方案1】：

您在表单标签上使用了 ng-if。 ng-if 将创建一个独立的子范围，当条件为 false 时它会从 DOM 中删除元素，并且仅在条件变为 true 时将元素添加回来，而 ng-show 只是通过添加 CSS 显示来切换元素的外观: 没有风格。最好在这些情况下使用 ng-show ，因为您需要使用 ng-if 启用或禁用容器内的内部值。你可以阅读this了解更多信息。

【讨论】：

解决了！ :) 非常感谢，我的朋友！