时间戳

首页 > 解决方案 > AngularJS 有条件需要

angularjs - AngularJS 有条件需要

问题描述

如果输入文本具有值或另一个值或两者都有，我想验证表单。

例如

<!-- if username has data -->
<div class="username">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required
               minlength="4" maxlength="8"
               placeholder="4 to 8 characters long" />
    </div>

<!-- if nickname has data -->
<div class="nickname">
        <label for="nickname">Nickname:</label>
        <input type="text" id="nickname" name="nickname" required
               minlength="4" maxlength="8"
               placeholder="4 to 8 characters long" />
    </div>

<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit">

- 编辑 -

好的，现在我有一些奇怪的东西，似乎“&&”运算符在 HTML 中不起作用，所以我有点卡住了..

实际上，在您的帮助下，如果条件得到验证，可以单击我的按钮。但奇怪的是： - 按钮未禁用 - 如果未验证条件，我的按钮不会显示我的 ng-if 消息。

HTML

<form class="form-horizontal" role="form" name="myForm" novalidate>
    <div class="card-body card-padding">
        <div class="form-group">
            <div class="container-fluid">
                <div class="row">
                    <label class="col-sm-2 control-label">Firstname</label>
                    <div class="col-sm-8">
                        <tags-input ng-model="myForm.firstname"
                                    min-length="0"
                                    name="firstname"
                                    use-strings="true" class="form-control" required>
                        </tags-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="container-fluid">
                <div class="row">
                    <label class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-8">
                        <tags-input ng-model="myForm.name"
                                    min-length="0"
                                    name="name"
                                    use-strings="true" class="form-control" required>
                        </tags-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="container-fluid">
                <div class="row">
                    <label class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-8">
                        <tags-input ng-model="myForm.email"
                                    min-length="0"
                                    name="email"
                                    use-strings="true" class="form-control" required>
                        </tags-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="container-fluid">
                <div class="row">
                    <label class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-8">
                        <tags-input ng-model="myForm.username"
                                    min-length="0"
                                    name="username"
                                    use-strings="true" class="form-control" required>
                        </tags-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="container-fluid">
                <div class="row">
                    <label class="col-sm-2 control-label">Nickname</label>
                    <div class="col-sm-8">
                        <tags-input ng-model="myForm.nickname"
                                    min-length="0"
                                    name="nickname"
                                    use-strings="true" class="form-control" required>
                        </tags-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group" data-ng-show="btnOk">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
                        ng-disabled="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">
                    <span ng-if="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">Some required fields are missing</span>
                    <span ng-if="(myForm.username.$valid || myForm.nickname.$valid) && myForm.email.$valid && myForm.name.$valid && myForm.firstname.$valid">{{button}}</span>
                </button>
            </div>
        </div>
    </div>
</form>

我怎样才能绕过这种行为？

标签： angularjsformsvalidationrequired

解决方案

一种选择是

  • 将它们包含在一个form（给它一个名字）中
  • ng-model为用户名和昵称输入声明一个
  • 使用AngularJS 为表单组件创建的对象的$valid/选项放置条件：$invalid

请参见下面的工作示例：

angular.module('app', []).controller('ctrl', function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="mForm" ng-app="app" ng-controller="ctrl as vm" novalidate>

  <!-- if username has data -->
  <div class="username">
    <label for="username">Username:</label>
    <input type="text" ng-model="vm.username" id="username" name="username" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
  </div>

  <!-- if nickname has data -->
  <div class="nickname">
    <label for="nickname">Username:</label>
    <input type="text" ng-model="vm.nickname" id="nickname" name="nickname" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
  </div>

  <!-- or if both has data submit is enabled -->
  <input type="submit" value="Submit" ng-disabled="mForm.username.$invalid && mForm.nickname.$invalid">

  <div>Valid: {{!!(mForm.username.$valid || mForm.nickname.$valid)}}</div>

  <form>

推荐阅读