AngularJS - How can set the true value for ng-disabled directive, when the page is loaded first time?

Question

I have this form with validation in AngularJS:

<form ng-app="myApp" ng-controller="validateCtrl as validate" name="myForm" action="sendEmail" novalidate>
                        <div class="form-group">
                            <input type="email" name="email" class="form-control" ng-model="validate.email" placeholder="Email" required>
                            <span style="color:yellow" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                                <span ng-show="myForm.email.$error.required">Email is required.</span>
                                <span ng-show="myForm.email.$error.email">Invalid email address.</span>
                            </span>
                        </div>                            
                        <div class="form-group">
                            <input type="text" name="subject" class="form-control" ng-model="validate.subject" placeholder="Subject" required>
                            <span style="color:yellow" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
                                <span ng-show="myForm.subject.$error.required">Subject is required.</span>
                            </span>
                        </div>
                        <div class="form-group">
                            <textarea type="text" name="message" class="form-control" ng-model="validate.message" placeholder="Message..." required></textarea>
                            <span style="color:yellow" ng-show="myForm.message.$dirty && myForm.message.$invalid">
                                <span ng-show="myForm.message.$error.required">Message is required.</span>
                            </span>
                        </div>
                            <button type="submit" class="btn btn-lg btn-success"
                                   ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
                                                   myForm.subject.$dirty && myForm.subject.$invalid ||
                                                   myForm.message.$dirty && myForm.message.$invalid"></button>                           
                    </form>

The button is disabled until the email, subject and message aren't correct. Ok, it's fine. But that is true, only if I have already interacted with the form.

In fact, when the page is loaded the first time and I haven't interacted with the form yet, the button is enabled. So, if I click it, I could send an empy email! I would that when the page is loaded the button is disabled and when I fill the fields become enabled.

How can I do that?

Thanks.

Answer 1

您的第一个条件可以是ng-disabled=" myForm.email.$invalid 。删除"myForm.email.$dirty

Answer 2

Try like this

<form name="postForm"   method="POST"  novalidate>
     <div class="col-md-8">
        <div class="col-md-12">
            <div class="col-md-12"><legend>Submit New Post</legend></div>
        </div>
        <div class="col-md-12 form-group">                  
            <div class="col-md-12" ng-class="{ 'has-error' : postForm.title.$invalid && !postForm.title.$pristine }">
                <input type="text" placeholder="Write Title" class="form-control" name="title" ng-model="post.title" required>
                <p ng-show="postForm.title.$invalid && !postForm.title.$pristine" class="text-danger">* Write Post Title</p>
            </div>
        </div>
        <div class="col-md-12 form-group">
            <div class="col-md-12" ng-class="{ 'has-error' : postForm.url.$invalid && !postForm.url.$pristine }">
                <input type="url" placeholder="Write URL" class="form-control"  name="url" ng-model="post.url" >    
                <p ng-show="postForm.url.$invalid && !postForm.url.$pristine" class="text-danger">* Write URL in http:// or https:// Format</p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-12"  >
                <p class="text-danger">{{msg}}</p>
            </div>
        </div>
        <div class="col-md-12 form-group">
            <div class="col-md-12"><button type="submit" class="btn btn-info" ng-disabled="postForm.$invalid" ng-click="submitForm(....)">Submit</button>
            &nbsp;&nbsp;<img src="img/loading.gif" ng-show="loading" /></div>
        </div>
    </div>
</form>

Answer 3

On your submit button, modify the ng-disabled to this:

ng-disabled="myForm.$invalid || myForm.$pristine">

In this case, you don't have to validate all your inputs separetely. Just test if your form is invalid OR if the user never interacted with it yet.

A form in AngularJS has two different states: pristine and dirty. The pristine indicates that your form was never touched. And dirty is the opposite. When the user set any value to one of your inputs, the angular change the state of your form from pristine to dirty.

I guess this post is a good reference to read about forms in angular