使表单在Angular中正常工作

时间:2014-08-08 17:37:16

标签: angularjs

我似乎永远无法让Form在Angular中正常工作。我总是添加一个<form name="myform">,然后尝试使用$scope.myform在模板或控制器中访问它,但它总是未定义的!我似乎无法弄清楚这些是如何工作的。

这是我的代码:

模板

<form name="o365form" novalidate>
          <ul class="formList">
                 <li>
                      <label>Office 365 Admin Username</label>
                      <input type="text" ng-model="Master.Start.skAccount.username" required/>
                 </li>
                 <li>
                      <label>Office 365 Admin Password</label>
                      <input type="text" ng-model="Master.Start.skAccount.password" required/>
                 </li>
          </ul>
</form>

然后我在控制器的函数中有这个代码,但o365form未定义...

控制器

if ($scope.o365form.$invalid) {
     return false;
} else {
     return true;
}

2 个答案:

答案 0 :(得分:0)

您需要使用ng-form directive

这就像

一样简单
<ng-form name="o365form">
          <ul class="formList">
                 <li>
                      <label>Office 365 Admin Username</label>
                      <input type="text" ng-model="Master.Start.skAccount.username" required/>
                 </li>
                 <li>
                      <label>Office 365 Admin Password</label>
                      <input type="text" ng-model="Master.Start.skAccount.password" required/>
                 </li>
          </ul>
</ng-form>

答案 1 :(得分:0)

以表格

添加ng-submit指令
<form name="o365form" ng-submit="submit(o365form)" novalidate>
      <ul class="formList">
             <li>
                  <label>Office 365 Admin Username</label>
                  <input type="text" ng-model="Master.Start.skAccount.username" required/>
             </li>
             <li>
                  <label>Office 365 Admin Password</label>
                  <input type="text" ng-model="Master.Start.skAccount.password" required/>
             </li>
      </ul>
</form>
控制器中的

$scope.submit = function(o365form){
  if (o365form.$valid) {
      return false;
  } else {
      return true;
  }
}

$ watch

的示例
<form name="o365form" form-valid novalidate>
      <ul class="formList">
             <li>
                  <label>Office 365 Admin Username</label>
                  <input type="text" ng-model="o365form.username" required/>
             </li>
             <li>
                  <label>Office 365 Admin Password</label>
                  <input type="text" ng-model="o365form.password" required/>
             </li>
      </ul>
  <button type="submit">Submit</button>
</form>

指令

app.directive("formValid", function () {
  return {
    link: function ($scope, element, attrs){
      $scope.$watch(attrs.name, function (isValid){
        if (isValid.$valid) alert("valid");
        else alert("not valid");

      }, true);
    }
  }
 });

DEMO