Я пытаюсь создать форму в угловых
<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',
...
}