Angularjs 让窗体在角度视图中正确工作

我似乎永远也无法让表单在角度上正常工作。我总是添加一个

，然后尝试使用

$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>

您需要使用以下选项：

这很简单

<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>

Office 365管理员用户名


Office 365管理员密码

在表单中添加ng提交指令

<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>

以$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>

---

我更喜欢在视图中声明性地执行此操作，ala

ng submit=“o365form.$valid&&submit（）”

。如果表单无效，它不会调用

submit（）

。但是如果我希望验证一直都在进行（每$watch一次），而不仅仅是在用户单击提交按钮时，该怎么办？

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

<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);
    }
  }
 });