Question

我有一个包含选择框和输入字段的表单。根据所选值，我需要显示所需的不同字段＆＃39;（非空白）

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

使用angular2 / ionic2启用/禁用提交按钮

1 个答案: