Question

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

例如

<!-- 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>

如何绕过这种行为？

Answer 1

一个选择是

将它们包含在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>

Answer 2

通过在我的情况下添加bool来解决此问题，例如：

<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.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">
                                <span ng-if="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">Some required fields are missing</span>
                                <span ng-if="(myForm.firstname.$valid && myForm.name.$valid && myForm.email.$valid && (myForm.username.$valid || myForm.nickname.$valid))">{{button}}</span>
                            </button>
                        </div>

AngularJS有条件的

2 个答案: