I have an md-button within my form that I've disabled using an ng-disable expression. Everything is functioning correctly. However, now I am looking to enable the button based on a specific condition from the controller. Here's how I attempted to set it:
vm.verifyMobileForm.$invalid = true;
Unfortunately, this approach did not work for me.
Below is the element in question:
<form name="verifyMobileForm" novalidate>
<md-input-container class="md-block" md-no-float>
<input type="mobile" id="mobile" ng-value="{{vm.form.mobile}}"
name="mobile" ng-model="vm.form.mobile"
placeholder="Your Mobile number"
ng-pattern="/^[789]\d{9}$/" maxlength="10" required
/>
<div ng-messages="verifyMobileForm.mobile.$error" role="alert" multiple>
<div ng-message="required">
<span >Mobile number is required</span>
</div>
</div>
</md-input-container>
<div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
<md-button type="submit"
class="md-raised md-accent submit-button"
ng-disabled="verifyMobileForm.$invalid || verifyMobileForm.$pristine"
ng-click = "vm.checkMobile($event, document.getElementById('mobile').value)"
>
Next
</md-button>
</div>
</form>
And here is the snippet from my controller where I tried to set it to true:
(function ()
{
'use strict';
angular
.module('app.pages.auth.verify-mobile')
.controller('VerifyMobileController', VerifyMobileController);
/** @ngInject */
function VerifyMobileController($scope,dataservice,msApi, $state,$mdDialog)
{
var vm = this;
vm.form = {};
var getMob = dataservice.getData();
if(getMob){
vm.form.mobile = getMob[1].mobile;
vm.verifyMobileForm.$invalid = true;
}
}
}();