Angular form validation, but without <form>?

Question

I am trying to get a very simple angular confirmation form using the angular material structure. I create this form in the web part of the Sharepoint 2010 content editor. An associate professor allows you to use. I am working on rebuilding the form instead on a web page, but without going into other more complex issues.

But I'm diving into other problems, I'm just wondering if the angular validation form can work without an element? Or if there are other directives that can replace it?

Here is a small example of what they need, but without a form element.

http://jsfiddle.net/jhadesdev/yfLqfzLw/2/?utm_source=website&utm_medium=embed&utm_campaign=yfLqfzLw

<div class="container" id="demoApp">
  <form class="pure-form pure-form-aligned" name="frm" method="post"
    novalidate autocomplete="off">
      <fieldset>

          <div class="pure-control-group">
              <label>Username</label>
              <input name="username" ng-model="user.username" type="text" placeholder="Username" required>
              <div class="field-message" ng-messages="frm.username.$error" ng-if='frm.username.$dirty' ng-cloak>
                <div ng-message="required">Username is required</div>
              </div>
          </div>

          <div class="pure-control-group">
              <label>Password</label>
              <input name="password"
              ng-model="user.password"
              type="password"
              placeholder="Password"
              required
              ng-minlength="6"
              ng-maxlength="10">
              <div class="field-message" ng-messages="frm.password.$error" ng-if='frm.password.$dirty' ng-cloak>
                <div ng-message="required">Password is required</div>
                <div ng-message="minlength">Password must have minimum 6 characters</div>
                <div ng-message="maxlength">Password must have maximum 10 characters</div>
              </div>
          </div>

          <div class="pure-control-group">
              <label>Email Address</label>
              <input name="email"
                ng-model="user.email"
                type="email"
                placeholder="Email Address"
                required>
                <div class="field-message" ng-messages="frm.email.$error" ng-if='frm.email.$dirty' ng-cloak>
                  <div ng-message="required">Email is required</div>
                  <div ng-message="email">Must be a valid email</div>
                </div>
          </div>

          <div class="pure-controls">
              <label class="pure-checkbox">
                  <input name="conditions" ng-model="conditions" type="checkbox">
                  I've read the terms and conditions
              </label>
              <button type="submit" class="pure-button pure-button-primary"
               ng-disabled="frm.$invalid || !conditions">Submit</button>
          </div>
      </fieldset>
  </form>
</div>

Anyone have any info on this? No luck finding documentation on this.

Answer 1

AngularJs ngForm directcive , <form>, ng-form div . , , div, form.

<div ng-form="frm" class="pure-form pure-form-aligned">
...
</div>

:

angular.module('DemoApp', ['ngMessages']);

angular.bootstrap(document.getElementById('demoApp'), ['DemoApp']);

@import "http://yui.yahooapis.com/pure/0.6.0/pure-min.css";
 .container {
  width: 970px;
  padding-top: 10px;
  margin: 0 auto;
}
.pure-form input.ng-dirty.ng-invalid {
  border-color: #e9322d;
}
.field-message {
  display: inline-block;
  color: #e9322d;
  font-size: 90%;
  margin-left: 0.5em;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.js"></script>
<div class="container" id="demoApp">
  <div ng-form="frm" class="pure-form pure-form-aligned" autocomplete="off">
    <fieldset>

      <div class="pure-control-group">
        <label>Username</label>
        <input name="username" ng-model="user.username" type="text" placeholder="Username" required>
        <div class="field-message" ng-messages="frm.username.$error" ng-if='frm.username.$dirty' ng-cloak>
          <div ng-message="required">Username is required</div>
        </div>
      </div>

      <div class="pure-control-group">
        <label>Password</label>
        <input name="password" ng-model="user.password" type="password" placeholder="Password" required ng-minlength="6" ng-maxlength="10">
        <div class="field-message" ng-messages="frm.password.$error" ng-if='frm.password.$dirty' ng-cloak>
          <div ng-message="required">Password is required</div>
          <div ng-message="minlength">Password must have minimum 6 characters</div>
          <div ng-message="maxlength">Password must have maximum 10 characters</div>
        </div>
      </div>

      <div class="pure-control-group">
        <label>Email Address</label>
        <input name="email" ng-model="user.email" type="email" placeholder="Email Address" required>
        <div class="field-message" ng-messages="frm.email.$error" ng-if='frm.email.$dirty' ng-cloak>
          <div ng-message="required">Email is required</div>
          <div ng-message="email">Must be a valid email</div>
        </div>
      </div>

      <div class="pure-controls">
        <label class="pure-checkbox">
          <input name="conditions" ng-model="conditions" type="checkbox">I've read the terms and conditions
        </label>
        <button type="submit" class="pure-button pure-button-primary" ng-disabled="frm.$invalid || !conditions">Submit</button>
      </div>
    </fieldset>
  </div>
</div>

Hide result