使用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]。