角型の妥当性検査ですが、<form>はありませんか？

Question

私は角度のマテリアルフレームワークを使用して非常に簡単な角度検証フォームを取得しようとしています。私はSharepoint 2010コンテンツエディタwebpartにこのフォームを作成しています。私はウェブページ上でフォームを再構築していますが、他のより複雑な問題には取り組んでいません。

しかし、角度の検証フォームが要素なしで動作できるかどうかは、他の問題に没頭していますか？あるいは、それを置き換えることができる他の指令がありますか？

Heresは、何を目指しているのか、フォーム要素を除いているのかの小さな例です。

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> 

誰もがこの上の任意の情報を持っていますか？これについての文書を見つける運がない。

Answer 1

AngularJs ngForm direciveは、あなたが好きなら、あなたがdivでng-formを使用することができ、<form>する要素を必要としません。たとえば、あなたのフィドルから取ったのは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>