Question

我有以下母版页：

<body ng-app="app" ng-controller="controller" ng-cloak>
<div class="header" ng-bind="header"></div>
<div class="content">
    <!-- This content will switch -->
    <ui-view></ui-view>
</div>
<div class="footer" ng-show="showFooter">
    <md-button class="md-raised md-primary" ng-click="cancel()">Cancel</md-button>
    <md-button class="md-raised md-primary" ng-click="ok()">OK</md-button>
</div>

以及下面带有<ui-view>标签的“添加联系人”页面：

    <form name="form">
    <button class="round-button"></button><br />
    <md-input-container>
        <input name="name" ng-model="name" placeholder="Name" minlength="3">
        <div ng-messages="form.name.$error" ng-show="form.name.$dirty">
            <div ng-message="required">This is required.</div>
            <div ng-message="minlength">Name has to be at least 3 characters long.</div>
        </div>
    </md-input-container>
    <br />
    <md-input-container>
        <label>Phone</label>
        <input name="phone" ng-model="phone" placeholder="Phone" ng-pattern="/^[0]{1}[5]{1}[0-9]{1}[0-9]{7}$/">
        <div ng-messages="form.phone.$error" ng-show="form.phone.$dirty">
            <div ng-message="required">This is required.</div>
            <div ng-message="pattern">Please enter a valid phone number.</div>
        </div>
    </md-input-container>
    <br />
    <md-input-container>
        <label>Mail</label>
        <input name="mail" ng-model="mail" placeholder="Mail" ng-pattern="/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/">
        <div ng-messages="form.mail.$error" ng-show="form.mail.$dirty">
            <div ng-message="pattern">Please enter a valid mail.</div>
        </div>
    </md-input-container>
    <br />
</form>

“我的添加联系人控制器”页面如下：

controller: function ($scope, $state, $rootScope,$http) {
                  $rootScope.cancel = function () {
                      $state.go("contacts");
                  };
                  $rootScope.ok = function () {

                      var contactInfo = {
                          name: $scope.name,
                          phone: $scope.phone,
                          mail: $scope.mail,
                          address: $scope.address
                      };
                      $http.post("/api/Contact", contactInfo)
                          .then(function (res) {
                              alert("contact added successfully");
                          });

                      $state.go("contacts");
                  };
                  $rootScope.header = "Add Contact";
                  $rootScope.showFooter = true;

在我使用$http调用Web服务之前，我希望禁用“母版页”中的“确定”按钮，直到正确填写表单中的所有字段。

有没有办法实现这个目标？

Answer 1

您应该能够通过在按钮上放置ng-disabled指令并检查表单是否有效来实现此目的。

<md-button class="md-raised md-primary" ng-disabled="!form.$valid" ng-click="ok()">OK</md-button>

使用AngularJS在母版页中禁用按钮

1 个答案: