离子 2 形式验证

Question

我在一个页面上有两个表格，一个是计费表格和一个运输表格。用户可以通过切换切换按钮来决定计费表单是否与发货表单相同。我想强制用户在提交按钮之前输入所有详细信息。但是，当用户决定帐单地址与送货地址相同时，他只需输入送货详细信息即可。

我已经在所有字段中添加了required，但我可以在不输入详细信息的情况下提交表格。

enter <ion-header>
<ion-navbar color="header"> 
<button ion-button menuToggle>
  <ion-icon name="menu">
  </ion-icon>
</button>
<ion-title text-center><img src="assets/logo.png" alt="logo" 
(click)="goHome()">
</ion-title>
</ion-navbar>
  </ion-header>
  <ion-content text-wrap class="billing-address-form">
    <div class="page-name">
        <ion-item no-lines padding-left>
    <b color="side-heading-color" text-uppercase>{{"Checkout"| translate}}
          </b>
  </ion-item>
    </div>
    <ion-list>
      <ion-item *ngIf="!values.isLoggedIn" class="side-heading-background Returningcustomer" no-lines>
  <ion-label color="side-heading-color">{{"Returningcustomer?Loginhere.." | translate}}
    <ion-icon ios="ios-log-in" md="md-log-in">
    </ion-icon>
  </ion-label>
  <ion-toggle checked="" [(ngModel)]="islogin" name="logIn">
  </ion-toggle>
      </ion-item>
      <div *ngIf="islogin && !values.isLoggedIn" class="login-form">
  <form #f="ngForm">
    <ion-list>
      <ion-item>
        <ion-label floating>{{"username" | translate}}
        </ion-label>
        <ion-input required type="email" [(ngModel)]="loginData.username" name="email">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>{{"password" | translate}}
        </ion-label>
        <ion-input required type="password" [(ngModel)]="loginData.password" name="password">
        </ion-input>
      </ion-item>
    </ion-list> 
    <div class="login-button"><!-- [disabled]="buttonSubmitLogin" -->
      <button ion-button block color="button-color" type="submit" text-uppercase (click)="doLogin(loginData)">{{buttonText2}}
      </button> 
    </div>
  </form>
      </div>
      <ion-item-group padding>
  <ion-item-divider color="light">Delivery Address</ion-item-divider>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'FirstName' | translate }}" [(ngModel)]="shippingAddress.first_name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'LastName' | translate }}" [(ngModel)]="shippingAddress.last_name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="email" placeholder="{{ 'Email' | translate }}" [(ngModel)]="shippingAddress.email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="phone" placeholder="{{ 'Phone' | translate }}" [(ngModel)]="shippingAddress.phone"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{'StreetAddress' | translate}}" [(ngModel)]="shippingAddress.address_1"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{'Landmark' | translate}}" [(ngModel)]="shippingAddress.address_2"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'City' | translate }}" [(ngModel)]="shippingAddress.city"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'Country' | translate }}" [(ngModel)]="shippingAddress.country" disabled="true"></ion-input>
  </ion-item>
      </ion-item-group>
      <ion-item-divider color="light">
  <ion-label>Billing Address(Same as Delivery)</ion-label>
  <ion-toggle color="dark" [(ngModel)]="sameAddress" item-right></ion-toggle>
      </ion-item-divider>
     <ion-item-group *ngIf="!sameAddress">
  <ion-item>
    <ion-input type="text" placeholder="{{ 'FirstName' | translate }}" [(ngModel)]="billingAddress.first_name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'LastName' | translate }}" [(ngModel)]="billingAddress.last_name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="email" placeholder="{{ 'Email' | translate }}" [(ngModel)]="billingAddress.email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="phone" placeholder="{{ 'Phone' | translate }}" [(ngModel)]="billingAddress.phone"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{'StreetAddress' | translate}}" [(ngModel)]="billingAddress.address_1"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'Landmark' | translate }}" [(ngModel)]="billingAddress.address_2"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'City' | translate }}" [(ngModel)]="billingAddress.city"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text" placeholder="{{ 'Country' | translate }}" [(ngModel)]="billingAddress.country" disabled="true"></ion-input>
  </ion-item>
      </ion-item-group>
      <ion-item-group radio-group>
  <ion-item-divider>{{ 'Delivery Method' | translate }}</ion-item-divider>
  <ion-item>
    <ion-label padding-left>{{shipmethod.title}} ( $ {{shipmethod.cost | number:'1.2-2'}})</ion-label>
    <ion-radio checked="true" value="shipmethod.id"></ion-radio>
  </ion-item>
      </ion-item-group>
    </ion-list>

      <ion-list>
  <ion-item class="side-heading-background order-review-header" no-lines>
    <ion-label color="side-heading-color">{{"Yourorder" | translate}}
    </ion-label>
  </ion-item>
  <!-- *ngFor="let item of values.cart; let i = index" -->
  <div *ngFor="let item of cart; let i = index">
    <ion-row>
      <ion-col width-75>
        <ion-label no-margin [innerHTML]="item.name + ' - (' + item.quantity +')'">
        </ion-label>
      </ion-col>
      <ion-col width-25 text-right><!-- currency:values.currency:true -->
        <ion-label no-margin>GH¢ {{1*item.price | number:'1.2-2'}}
        </ion-label>
      </ion-col>
    </ion-row>
  </div>
  <ion-row>
    <ion-col width-75>
      <ion-label no-margin>{{"SubTotal" | translate}}
      </ion-label>
    </ion-col>
    <ion-col width-25 text-right>
      <ion-label no-margin>GH¢ {{ 1*values.subTotal | number:'1.2-2' }}
      </ion-label>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-75>
      <ion-label no-margin>
        <b>{{"Totals" | translate}}
        </b>
      </ion-label>
    </ion-col>
    <ion-col width-25 text-right>
      <ion-label no-margin>
        <b>GH¢ {{1*values.total | number:'1.2-2'}}
        </b>
      </ion-label>
    </ion-col>
  </ion-row>
      </ion-list>
      <ion-item class="side-heading-background payment-method-header" no-lines>
  <ion-label color="side-heading-color">{{"SelectPaymentMethod" | translate}}
  </ion-label>
</ion-item>
<div *ngIf="form.payment">
  <ion-list no-margin text-wrap radio-group [(ngModel)]="payment_method" (ngModelChange)="changePayment()">
    <ion-item *ngFor="let method of form.payment | keys">
      <ion-label class="payment-method-title">{{method.value.title}}
      </ion-label>
      <ion-radio value="{{method.value.id}}">
      </ion-radio>
    </ion-item>
  </ion-list>
  <div class="side-heading-background">
    <ion-label class="payment-instructions" [innerHTML]="form.payment_instructions">
    </ion-label> 
  <ion-item no-lines class="side-heading-background">
  <ion-label>{{"I Agree" | translate}} <a (click)="terms()">{{"Terms and Conditions" | translate}}</a>
  </ion-label>
  <ion-toggle [(ngModel)]="termsAgreed" name="terms">
  </ion-toggle>
  </ion-item>
  <div class="button-margin">
    <button ion-button color="button-color" text-uppercase [disabled]="values.total < 1" block secondary type="submit" class="button button-block button-default" (click)="payViaSite()">{{"PlaceOrder" | translate}}
    </button> 
  </div>
  </div>
</div>
<br>
<br>
  </ion-content>

Answer 1

您可以

执行的一个选项是禁用提交按钮

<button type="submit" [disabled]="!f.valid">Submit</button>

或者仅在表单有效时执行功能

模板

<form #f="ngForm" (ngSubmit)="onSubmit(f.valid)">
  ...
    //code with submit button
  ...
</form>

元件

onSubmit(valid : boolean)
{
 if(valid == true)
   {
   //do action
   }
}