AngularJS获取无表单的无效元素组

时间:2015-04-24 20:09:21

标签: javascript angularjs

有没有一种很好的方法来获取一组元素而不使用表单?我的问题是使用.net mvc和<fieldset name="user_fieldset"> <input type="text" ng-model="Firstname" /> <input type="text" ng-model="Lastname" /> ... </fieldset> <button ng-disabled="user_fieldset.$valid" ng-class="{'disabled' : user_fieldset.$valid}">Next</button> 可以删除其中的任何形式。

DROP TABLE IF EXISTS `CUSTOMER`; 
CREATE TABLE `CUSTOMER` (   
`ACCT_ID` INT NOT NULL  , 
`FIRST_NAME` VARCHAR(10) , 
`LAST_NAME` VARCHAR(9) , 
`ADDRESS_1` VARCHAR(34) , 
`ADDRESS_2` VARCHAR(7) , 
`ADDRESS_3` VARCHAR(8) , 
`ADDRESS_4` VARCHAR(7) , 
`CONTACT` VARCHAR(14) , 
`EMAIL` VARCHAR(47) , 
`REG_DATE` DATETIME , 
`LAST_PURCHASE` DATETIME , 
PRIMARY KEY  (`ACCT_ID`) );

1 个答案:

答案 0 :(得分:1)

您可以使用ng-form指令作为属性。

来自AngularJS Hub的示例:

&#13;
&#13;
angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    $scope.person = {};
  });
&#13;
<!DOCTYPE html>
<html>
<head>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <style>
    label
    {
      display: inline-block;
      width: 120px;
      vertical-align: middle;
    }

    input
    {
      display: inline-block;
      vertical-align: middle;
    }

    input.ng-invalid
    {
      border: solid red 2px;
    }

    form
    {
      padding: 10px;
    }

    textarea
    {
      width: 250px;
      height: 160px;
    }
  </style>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <form name="personForm" novalidate>
      <label for="firstNameEdit">First name:</label>
      <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
      <label for="lastNameEdit">Last name:</label>
      <input id="lastNameEdit" type="text" name="lastName" ng-model="person.lastName" required /><br />
      <ng-form name="addressForm">
        <label for="addressEdit">Address:</label>
        <input id="addressEdit" type="text" name="address" ng-model="person.address" /><br />
        <label for="zipEdit">ZIP code:</label>
        <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
        <label for="cityEdit">City:</label>
        <input id="cityEdit" type="text" name="city" ng-model="person.city" /><br />
        <label for="stateProvinceEdit">State/Province:</label>
        <input id="stateProvinceEdit" type="text" name="stateProvince" ng-model="person.stateProvince" /><br />
        <label for="countryEdit">Country:</label>
        <input id="countryEdit" type="text" name="country" ng-model="person.country" />
      </ng-form>
    </form>
    <br />
    <strong><label for="userDebugText">Person:</label></strong><br />
    <textarea id="userDebugText">{{person | json}}</textarea><br />
    <br />
    <strong>Form validity:</strong><br />
    <ul>
      <li><strong>personForm.$valid =</strong> {{personForm.$valid}}</li>
      <li><strong>personForm.addressForm.$valid =</strong> {{personForm.addressForm.$valid}}</li>
      <li><strong>personForm.firstName.$valid =</strong> {{personForm.firstName.$valid}}</li>
      <li><strong>personForm.lastName.$valid =</strong> {{personForm.lastName.$valid}}</li>
      <li><strong>personForm.addressForm.zip.$valid =</strong> {{personForm.addressForm.zip.$valid}}</li>
    </ul>
  </div>
</body>
</html>
&#13;
&#13;
&#13;

相关问题