使用angular2/ionic2啓用/禁用提交按鈕

Question

我有一個具有選擇框和輸入字段的表單。基於選擇的價值，我需要證明這是「必要」的不同領域（不爲空）

<form [formGroup]="addBeneficiaryForm"> 
     <ion-item [class.error]="!type.valid && type.touched"> 
       <ion-label>Type</ion-label> 
        <ion-select [formControl]="type"> 
        <ion-option value="VPA">VPA</ion-option> 
        <ion-option value="IFSC">ACCOUNT/IFSC</ion-option> 
       </ion-select> 
       </ion-item> 
       <p *ngIf="type.hasError('required') && type.touched" danger>type required</p> 
       <div *ngIf="type.value == 'VPA'"> 
       <ion-item [class.error]="!beneficiaryvid.valid && beneficiaryvid.touched"> 
        <ion-label floating>Virtual Address</ion-label> 
        <ion-input [formControl]="beneficiaryvid" type="text"> 
        </ion-input> 
       </ion-item> 
       <p *ngIf="beneficiaryvid.hasError('required') && beneficiaryvid.touched" danger>Virtual ID is required</p> 
       </div> 

       <div *ngIf="type.value == 'IFSC'"> 
       <ion-item [class.error]="!actype.valid && actype.touched"> 
        <ion-label>Account Type</ion-label>         
       </ion-item> 
       <p *ngIf="actype.hasError('required') && actype.touched" danger>account type is required</p> 
    <div class="btn-top-margin"> 
      <button [disabled]="!addBeneficiaryForm.valid" (click)="addBenificiary(addBeneficiaryForm.value)" large primary block>Add</button> 
      </div> 
</form> 

signup.ts文件，

this.addAccountForm = fb.group({ 
     'type': ['', Validators.compose([Validators.required])],   
     'beneficiaryvid': ['', Validators.compose([Validators.required])], 
     'actype': ['', Validators.compose([Validators.required])] 
    }); 


    this.type= this.addAccountForm.controls['type']; 
    this.beneficiaryvid= this.addAccountForm.controls['beneficiaryvid']; 
    this.actype= this.addAccountForm.controls['actype']; 

，我希望能一次提交按鈕表單有效，但按鈕仍處於禁用狀態。

Answer 1

您從我看到的所有actype中沒有任何輸入，並且考慮到它是必填字段，因此您的表單始終無效。您還應該在模板中使用formControlName而不是[formControl]。