Fatal编程技术网

需要AngularJS条件

angularjs forms validation

需要AngularJS条件,angularjs,forms,validation,required,Angularjs,Forms,Validation,Required,我想验证一个表单，如果一个输入文本有值，或者另一个有值，或者两者都有值 比如说 <!-- if username has data --> <div class="username"> <label for="username">Username:</label> <input type="text" id="username" name="username" required m

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

比如说

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


名字
名称
电子邮件
用户名
昵称
缺少一些必填字段
{{按钮}
如何绕过此行为？

一个选项是

  • 将它们放在
    表格中
    （给它起个名字）
  • 为用户名和昵称输入声明一个
    ng模型
  • 使用AngularJS为表单组件创建的对象的
    $valid
    /
    $invalid
    选项放置条件：
请参见下面的工作示例：

angular.module（'app'，[]）.controller（'ctrl'，function（）{}）


用户名：
用户名：
有效：{{！！（mForm.username.$Valid | | mForm.昵称.$Valid）}

通过在我的情况下添加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>




缺少一些必填字段
{{按钮}

如果对此有用，请使用此选项，或尝试为您解决此问题
ng required
允许您使用变量指示是否需要字段：等等，如果
用户名
有数据，是否显示
，如果
昵称
有数据，是否显示
？或者，如果前面提到的任何一个有数据，是否启用了提交按钮？怎么样？根据问题主体的说法，问题标题有点误导…@Nathan Meyer，拜托，如果你能制作一个像我答案中的a一样的运行片段，以便重现你的问题，同时发布当前行为和预期行为，那将非常有帮助（因为在您的更新之后，我对它不太清楚。）欢迎您！如果这对您有用的话，请为将来的读者提出这个问题，如果您认为它能回答您的问题，请考虑一下。哦，好吧，让我来。see@NathanMeyer我在这里看到三个新字段用于这些条件，现在提交按钮不是
输入
，但是有一个
按钮
。你也可以更新html吗？不过如果你能为这个新的奇怪行为启动一个新的线程并关闭这个线程会好得多。无论如何，为了帮助你，请让我知道。如果你关闭这个线程，请记住回滚上次编辑，因为它不适合你最初提出的问题。