当我的所有 Ng-from 都有效时启用一个按钮

Enable one button when all my Ng-from is Valid

本文关键字：按钮 一个 启用 我的 Ng-from 有效      更新时间：2023-09-26
 <div ng-show="!login.SecQuestions && !login.ResetUser">
                <h3>Answer security questions</h3>
                <ul>
                    <li>
                        <label>Please answer the following question(s)</label>
                    </li>
                </ul>
                <ul>
                    <li>
                        *= required field
                    </li>
                </ul>
                <ul ng-repeat="Question in login.SecurityQuestions">
                    <li>
                        {{Question.Question}}
                    </li>
                    <li>
                        <ng-form name="SecQuestionForm" novalidate>
                            <textarea name="SecurityAnswer" ng-model="Question.Answer" type="text" required></textarea>
                            <span style="color:red" ng-if="SecQuestionForm.SecurityAnswer.$dirty" ng-show="SecQuestionForm.SecurityAnswer.$invalid">required.</span>
                        </ng-form>
                    </li>
                </ul>
                <ul>
                    <li>
                        <button class="primaryButton" ng-disabled="ResetNamePass.SecQuestionForm.$invalid" ng-click="Continue_2()">Continue</button>
                    </li>
                </ul>
            </div>

ng-Form 的 Dyanamic 验证启用按钮不会验证所有三个必填字段，而是根据最后一个文本区域的必填性启用。

错误的屏幕截图

https://drive.google.com/folderview?id=0Bz2v151kdXv8fjNsc0VGLVpOOFNoRklCcTdZNjFkOWprOEYteENJTUN1YUZUbHRVc3hNaFE&usp=sharing

将您的 ng 表单放在一个表单中，然后添加条件按钮以表示外部表单的有效性。

<form novalidate name='form1'>
    <ul ng-repeat="Question in login.SecurityQuestions">
                        <li>
                            {{Question.Question}}
                        </li>
                        <li>
                            <ng-form name="SecQuestionForm" novalidate>
                                <textarea name="SecurityAnswer" ng-model="Question.Answer" type="text" required></textarea>
                                <span style="color:red" ng-if="SecQuestionForm.SecurityAnswer.$dirty" ng-show="SecQuestionForm.SecurityAnswer.$invalid">required.</span>
                            </ng-form>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <button class="primaryButton" ng-disabled="!form1.$valid" ng-click="Continue_2()">Continue</button>
                        </li>
                    </ul>
</form>

仅当所有嵌套的 ng 表单都有效时，外部表单才有效

让我们想象一下，如果你有这样的表格

<form name='form'>
   <input name='name'></input>
   <button ng-disabled='!form.name'></button>
</form>

希望对你有帮助演示小提琴

角度 -

开发人员指南 - 表单

  <form name="form" class="css-form" novalidate>
  <div>
    Overwritten Email:
    <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
    <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
    Model: {{myEmail}}
    </div>
</form>

 `<form name="frmsignIn" ng-submit="login()" novalidate >
  <span class="glyphicon glyphicon-user" ></span>
  <div>
  <label for="email" >Email</label>
   <input type="email" name="email" ng-model="userName" ng-required="true"/>
   <span ng-show="frmsignIn.email.$dirty && frmsignIn.email.$error.required">*</span><span ng-show="frmsignIn.email.$dirty && frmsignIn.email.$error.email">Invalid email address</span>
    </div>
   <div>
    <label for="password">Password</label>
   <input type="password" name="password" ng-model="password" ng-required="true"/>
  <span ng-show="frmsignIn.password.$dirty && frmsignIn.password.$error.required">*</span>
   </div>
   <div>
    <button  type="submit" ng-disabled="frmsignIn.$invalid"  >  {{buttonText}}</button>
   </div>
   <div>
    <span ng-show="showErrorMsg">Invalid Email Address/Password.Please try again.</span>
   </div>
    </form>`
相关文章：