AngularJS 有条件需要

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 有条件需要

AngularJS conditional required

forms

validation

required

angularjs