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