如何在角度中强制输入字段? ng-validate或html require不起作用

时间:2017-01-30 18:35:48

标签: html angularjs

我正在尝试要求用户填写输入字段/具有一定的长度。我试过简单 - 要求,我尝试使用class =&#34进行$ valid;验证"并且对于长度,我使用了角度ng-validate。什么都行不通,它有其他形式。我一直在查看我的代码,比较一段时间,只是不知道为什么它不起作用(即使所有字段都是空的,我被引导到另一个页面,只有在验证是肯定的情况下才会发生)。 同样对于ng-validate,一旦我开始输入Im得到错误:

找到循环依赖项:tooltipDirective< - tooltipDirective

我已阅读文档并且不了解它 - 我想在某种程度上在我的控制器中引用ng-validate?谢谢!

<div>
   <form id="paymentForm" method="POST" ng-hide ='paid' validation-form>
      <div>
         <label for="name">first</label>
         <input type="text" name="name" validation-field required minlength="3" placeholder= 'First Name' ng-model = "info.firstName" style="border-bottom:1px solid pink;"></input>
      </div>
      <div>
         <label for="userEmail">last</label>
         <input placeholder= 'Last Name' ng-model = "info.lastName" required></input>
      </div>
   </form>
   <button type="submit"class="submitValidate" ng-hide ='paid' ng-click='validate()' material>Submit</button> 
</div>

2 个答案:

答案 0 :(得分:1)

我建议你阅读有关角形验证的信息

https://scotch.io/tutorials/angularjs-form-validation

https://docs.angularjs.org/guide/forms

此输入未填写时所需输入和禁用提交按钮的示例

https://plnkr.co/edit/12xpTay5O4Qczyk1CNmR?p=preview

   <form name="form" ng-submit="validate()" role="form">
        <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$error.required }">
            <label for="name">name</label>
            <input type="text" name="name" id="name" class="form-control" ng-model="user.name" required />
            <span ng-show="form.name.$error.required" class="help-block">Name is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$error.required }">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" class="form-control" ng-model="user.email" required />
            <span ng-show="form.email.$error.required" class="help-block">Email is required</span>
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
                validate
            </button>

        </div>
        <pre>{{form |json }}</pre>

    </form>

答案 1 :(得分:0)

ng-minlength="3"

尝试这样的事情:

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
 <div class="control-group" ng-class="{error: myForm.name.$invalid}">
        <div class="controls">
            <input type="text" name="name"  placeholder="First Name" ng-model="name" ng-minlength="3"  required />
             <span ng-show="myForm.name.$error.minlength" class="help-inline">Name should be minimum 3</span>   
        </div>
    </div>

     <div class="control-group">
        <div class="controls">                       
            <input  class="btn" type="submit" value ="submit" />
        </div>

         count: {{count}}<br />

<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
    </div>
</form>