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
}

对于输入，您设置了一个＆＃39;听众＆＃39;为了改变：

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

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

1 个答案: