0

I want my button enable when both forms are valid. My button is in the view at the level of the controller while a form is in a directive. What I have done does not work. I thought there might be some wrong syntax within my ng-disabled="" on my button. How do I accomplish this issue without some weird hack? Sorry, I'm new to Angularjs. Here are my codes. Cheers!!

index.html

<div ng-app="myApp" ng-controller="myCtrl">
    <myform user="user1"></myform>
    <myform user="user2"></myform>
    <button ng-disabled="user1.formname.$invalid || user2.formname.$invalid">My Button</button>
</div>

my script

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {
     $scope.user1 = {formname: "user1form" ,firstName: "John", lastName: "Doe"};
     $scope.user2 = {formname: "user2form" ,firstName: "Lisa", lastName: "Smith"}
});

app.directive( 'datepickerform', function() {
     return {
          restrict: 'E',
          scope: {
             user : '='
          },
          templateUrl: 'myform.html',
          link: function( scope, element, attrs ) {}
    };
});

myform Directive Template :

<form name="user.formname" novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName" required><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName" required>
</form>
Cheetah Felidae
  • 999
  • 2
  • 7
  • 14
  • 1
    I don't think this is a wired hack. This looks quite ok to me.. However, you could work with shared variables. Push your "user" + "$invalid" to a data service and build a second directive for the button. http://stackoverflow.com/questions/13482351/sharing-data-between-directives – jaecktec Oct 21 '15 at 08:17
  • @Coco Hey Thanks for your advice but I'd like to hear some other ways to solve my issue. I thought my ng-disabled="" on the button might be some wrong syntax. I hope there's a way. – Cheetah Felidae Oct 22 '15 at 01:57
  • Variations of `ng-disabled="form1.$invalid || form2.$invalid"` are completely legit, I use that regularly. Please note that `formname: "userXform"` in user definition is useless because it's lost upon loading of that controller, because `name` attribute of `form` element means place where its controller is bound and that binding rewrites the value `"userXform"`. – Kate Miháliková Oct 22 '15 at 04:02

0 Answers0