Question

我正在尝试创建角形表单

<form name="vm.mechanicalForm">
    <div layout="column" layout-padding>
       <div layout="row" layout-align="end center">
            <md-button class="aq-btn md-accent" type="submit"
                       ng-show="vm.Auth.check({access: 'EDIT'})"
                       ng-click="vm.save()"
                       ng-disabled="vm.mechanicalForm.$invalid">
                Save Button
            </md-button>
        </div>
        <div>
        <md-input-container class="md-block"
            ng-if="vm.building.mainSourceOfCooling === 'CHILLERS'">
                <label>Cooler</label>
                <input name="numberOfChillers" class="form-control" 
                       type="number" 
                       ng-model="vm.building.numberOfChillers"
                       required min="0">
                <div ng-messages="vm.mechanicalForm.numberOfChillers.$error"
                     ng-hide="vm.building.numberOfChillers">
                    <div ng-message="min">
                        <span class="red">Number of Chillers must be a positive number</span>
                    </div>
                </div>
        </md-input-container>
    </div>
    </div>
</form>

我无法获得连接到表单的任何状态，例如vm.mechanicalForm.$invalid/$valid正常工作。当输入的散热器数量为负数时，我希望能够禁用我的保存按钮。即使显示错误Number of chillers must be positive，保存按钮仍然有效。另外，我想更改ng-hide div上的ng-messages以在表单有效时隐藏div，但这似乎也破坏了功能。我该怎么做才能纠正此错误？我四处查看堆栈溢出，看到的答案似乎表明我正确使用了表单状态。

编辑：

这是我的控制器代码：

namespace properties {
export class MechanicalCtrl {
    constructor(
        public Messages,
        public building,
        public BuildingService,
        private allEnums,
        private Auth
    ) {}

    public save() {
        this.BuildingService.updateBuilding(this.building)
            .then(() => {
                this.Messages.success('Successfully updated mechanical information');
            })
            .catch(() => {
                this.Messages.error('Unable to update mechanical information');
            });
    }
}
angular
    .module('properties')
    .controller('MechanicalCtrl', MechanicalCtrl);

}

根据答案here，我应该能够将vm.mechanicalForm中的MechanicalCtrl称为this.mechanicalForm（除非我误解了该答案）。我注意到的另一件事是我无法执行此操作。我曾尝试通过尝试console.log表单上的属性来调试它，但是如果执行console.log(this.mechanicalForm)，它将作为未定义返回。我做错了什么吗？

编辑2：

我将模板和控制器设置为

.state(...) {
   templateUrl: 'my/template/url',
   controller: 'MechanicalCtrl as vm',
    ...
}

无法使用表单状态控制html元素

0 个答案: