How to make a button enable/disable based on select option values?

Question

I am disabling a button on opening a form.After choosing any select option value or entering input in the input box.the button has to be enabled.When I am using ngmodel,but it doesn't works.How can I disable the button and enable it on selecting value in Angular4?

<div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color:#DF1003">
                <!--              <button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <h2 align="center" style="color:white"><b>SimplySalt</b></h2>
            </div>
            <div class="modal-body">
                <md-card class="cardClass">
                    <md-card-content>
                        <h3 align="center"><b>Select Your Nearest Store!</b></h3>
                        <span style="font-size:12px;color:#B3B6B7"><b>Selecting your store is the only way we can make sure the items selected are available in stock. Changing your store location can affect the items in your cart if not available.</b></span>
                        <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" style="background-color:#F2F4F4;border:1px solid black"><br>
                            <fieldset>
                                <md-radio-group class="pull-left" style="margin:10px">

                                    <md-radio-button #ship value="ship" [checked]="true" style="font-size:16px">Pickup in the store!</md-radio-button><br>
                                    <table>
                                        <tr>
                                            <span style="font-size:12px;margin-left:25px;color:red">(Ready in as little as 1 hour)</span></tr>
                                        <tr>
                                            <select placeholder="Pick here" *ngIf="ship.checked" style="margin-left:25px;width:100%">
          <option *ngFor="let data of objArray" >{{data}}</option>
        </select>
                                        </tr>
                                    </table>
                                    <br>
                                    <md-radio-button #ship1 value="ship1" style="font-size:16px">Ship</md-radio-button><br>
                                    <table>
                                        <tr> <span style="font-size:12px;margin-left:25px;color:red">(3-5 Business Days)</span></tr>
                                        <tr>
                                            <select placeholder="Pick here" *ngIf="ship1.checked" style="margin-left:25px;width:100%">
          <option *ngFor="let data of objArray" >{{data}}</option>
        </select>
                                        </tr>
                                    </table>
                                    <br>
                                    <md-radio-button #ship2 value="ship2" style="font-size:16px">Schedule a Delivery</md-radio-button><br>
                                    <table>
                                        <tr>
                                            <span style="font-size:12px;margin-left:25px;color:red">(Enter 5 digit ZIP code of the delivery address)</span>
                                        </tr>
                                        <tr>
                                            <md-form-field class="example-full-width" *ngIf="ship2.checked" style="margin-left:25px;padding:5px"> <input mdInput placeholder="ZIP code" name="zipcode"></md-form-field><br></tr>
                                    </table>
                                    <br>

                                </md-radio-group>
                                <br>
                            </fieldset>
                        </form>
                    </md-card-content>
                </md-card>
            </div>
            <div class="modal-footer" style="background-color:#DF1003">
                <button type="button" md-raised-button data-dismiss="modal" style="text-align:center">SELECT</button>
            </div>
        </div>

    </div>
</div>

Answer 1

You don't have ngModel set on your selects, so you can do like:

<select ....(change)="onChange($event)"...>

and if you need to set the ngModel, do like bellow:

<select [ngModel]="selectedValue" (ngModelChange)="onChange($event)" >

and set the button disabled state:

<button...[disabled]="!buttonDisabled"..>...</button>

where buttonDisabled is a set in the class:

...
buttonDisabled: boolean;
...

onChange(event){
  this.buttonDisabled = true
}

For the inputs, you set a 'listener' for the changes:

@ViewChild('myForm') myForm: NgForm;
myForm: NgForm;
....
ngOnInit() {
    this.myForm.valueChanges.subscribe((value: any) => {
         this.buttonDisabled=true   
    });
}