如何根据选择的选项值启用/禁用按钮？

Question

我在打开表单时禁用了一个按钮。在选择任何选择选项值或在输入框中输入输入后。必须启用该按钮。当我使用 ngmodel 时，它不起作用。我该如何禁用按钮并在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

你没有在你的选择上设置 ngModel，所以你可以这样做：

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

如果您需要设置 ngModel，请执行以下操作：

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

并设置按钮禁用状态：

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

其中 buttonDisabled 是类中的一个集合：

...
buttonDisabled: boolean;
...

onChange(event){
  this.buttonDisabled = true
}

对于输入，您为更改设置了一个“侦听器”：

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