Disable button while ngForm is invalid

Question

I have an add modal in that I need the SAVE button to be disabled till the contents are filled. As the contents are filled the button should get enabled.Here is my code

<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <form name='groupForm' #groupForm="ngForm" novalidate>
            <div class="modal-header">
                <h4 class="modal-title wd-title-popup">Add Access Group</h4>
            </div>
            <div class="modal-body row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 accssContent paddingLeftClass">
                    <md-input-container style='width: 100%;margin-bottom: 6px !important;'>
                        <input type="textbox" mdInput name="admin" [(ngModel)]="group.groupName" placeholder="Access Group Name" required>
                    </md-input-container>
                </div>
            </div>
            <div md-theme="reports" class="modal-footer" style="text-align: center;">
                <div layout-align="end center" layout="row">
                    <button md-raised-button class="md-raised color-white" (click)="editModal.hide()" style="width: 45%;margin: 10px 5px;background-color: #FF5252;">Cancel</button>
                    <button md-raised-button class="md-raised color-white" [disabled]="!groupForm.form.valid" (click)="accessGroup(group)" style="width: 45%;margin: 10px 5px;background-color:#58B6A2;">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

This same is working fine with other buttons. Whats am I doing wrong here?

Add to form [formGroup]="myForm" on and then in disabled [disabled]="!myForm.valid". You also have novalidate property in the form which is used to disable browser's native form validation. — mxr7350
– mxr7350, Commented Aug 24, 2017 at 8:09

FAISAL · Accepted Answer · 2017-08-24 08:19:13Z

2

Try using the invalid property. Change it like this:

<button md-raised-button class="md-raised color-white"  
        (click)="accessGroup(group)" 
        [disabled]="groupForm.invalid">Save</button>

Link to Plunker Demo.

answered Aug 24, 2017 at 8:19

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten · Accepted Answer · 2017-08-24 08:14:35Z

0

Your form has novalidate which might cause the form to skip validation and not set the valid variable

answered Aug 24, 2017 at 8:14

Carsten

4,22826 silver badges30 bronze badges

1 Comment

FAISAL Over a year ago

Notice that now the single input is in a form element. The novalidate attribute in the <form> element prevents the browser from attempting native HTML validations.

read here: angular.io/guide/reactive-forms

Collectives™ on Stack Overflow

Disable button while ngForm is invalid

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related