Невозможно управлять элементами HTML, используя состояние формы - PullRequest
0 голосов
/ 08 марта 2019

Я пытаюсь создать форму в угловых

<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 на ng-messages div, чтобы скрыть div, когда форма верна, но это, похоже, нарушает функциональность. Что я могу сделать, чтобы исправить эту ошибку? Я посмотрел вокруг на переполнение стека, и ответы, которые я видел, кажется, предполагают, что я правильно использую состояние формы.

EDIT:

Вот мой код контроллера:

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

}

Согласно ответу здесь я должен иметь возможность ссылаться на vm.mechanicalForm в своем MechanicalCtrl как this.mechanicalForm (если я не понял этого ответа). Еще одна вещь, которую я заметил, это то, что я не могу этого сделать. Я пытался отладить это, пытаясь console.log свойства формы, но он возвращается как неопределенный, если я делаю console.log(this.mechanicalForm). Я сделал что-то не так?

РЕДАКТИРОВАТЬ 2:

Я настраиваю свой шаблон и контроллер как

.state(...) {
   templateUrl: 'my/template/url',
   controller: 'MechanicalCtrl as vm',
    ...
} 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...