オプションの選択値に基づいてボタンの有効/無効を切り替える方法は？

Question

フォームを開く際にボタンを無効にしています。選択オプションの値を選択した後、または入力ボックスに入力を入力した後、ボタンを有効にする必要があります。ngmodelを使用していても動作しません。ボタンをクリックしてAngular4で値を選択することができますか？

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

、あなたがngModelを設定する必要がある場合は、怒鳴るように実行します。

<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 [ngModel]="selectedValue" (ngModelChange)="onChange($event)" > 

と設定ボタン無効状態：

buttonDisabledはクラスのセットです

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

：入力の場合

... 
buttonDisabled: boolean; 
... 

onChange(event){ 
    this.buttonDisabled = true 
} 

、あなたが変更のための 'リスナー' を設定します。

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