AngularJS conditional required

Question

I want to validate a form if an input text has value, or another one, or both of them.

For example

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

-- EDIT --

Ok now I have something weird, it seems that the "&&" operator doesn't work in HTML, so I'm a bit stuck..

Actually, with your help, my button can be clicked if the condition is verified. But strangely : - Button is not disabled - If the condition is not verified, my button doesn't display my ng-if message.

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>

How can I bypass this behavior ?

Please use this if useful for this or will try to solve for you.. next.plnkr.co/edit/lCRwhj?p=preview&preview — kuldeep
– kuldeep, Commented Jul 20, 2018 at 16:59
ng-required allows you to use a varaible to indicate if a field is required: docs.angularjs.org/api/ng/directive/ngRequired — Pop-A-Stash
– Pop-A-Stash, Commented Jul 20, 2018 at 16:59
Wait, do you want to show <div class="username"> if the username has data and show the <div class="nickname"> if the nickname has data? or enabled the submit button if either of the previous mentioned has data? How is it? The question title is a little missleading according to the question body... — lealceldeiro
– lealceldeiro, Commented Jul 20, 2018 at 18:38
@Nathan Meyer, please, it would be really helpful if you could make a running snippet like the one a posted in my answer in order to reproduce your issue, posting also the current behavior and expected one ( since it's not very clear to me after your update. — lealceldeiro
– lealceldeiro, Commented Jul 23, 2018 at 15:18

lealceldeiro · Accepted Answer · 2018-07-20 18:51:01Z

An option is to

Enclose them inside a form (give it a name)
Declare an ng-model for username and nickname inputs
Put the conditionals using the $valid/$invalid options of the objects created by AngularJS for the form components:

See below working example:

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>

@NathanMeyer You're welcome! If this was useful to you, please upvote this question for future readers and consider accepting it if you think it answers your question.
@NathanMeyer I see three new fields being used for these conditions here and now the submit button is not an input, but a button. Can you please update the html too?, although it good be a lot better if you could start a new thread for this new strange behavior and close this thread. In any case let me know in order to help you. If you close this thread remember to rollback your last edit, since it wouldn't fit with the initial question you made.

Nathan Meyer · Accepted Answer · 2018-07-23 15:24:33Z

Resolved this by adding bool in my condition like:

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

Collectives™ on Stack Overflow

AngularJS conditional required

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related