如何基于选择选项值使按钮启用/禁用？

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   
    });
}