Fatal编程技术网

Validation 离子2型验证

validation ionic-framework ionic2 forms

Validation 离子2型验证,validation,ionic-framework,ionic2,forms,Validation,Ionic Framework,Ionic2,Forms,我在一页上有两张表格，一张是账单，一张是发货单。用户可以通过切换切换按钮来决定账单表单是否与发货表单相同。我想强制用户在提交按钮之前输入所有详细信息。但当用户决定账单地址与发货地址相同时，他只需输入发货详细信息 我已在所有字段中添加了required，但我可以在不输入详细信息的情况下提交表单 enter <ion-header> <ion-navbar color="header"> <button ion-button menuToggle> <

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

我已在所有字段中添加了
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>

enter
{{“签出”|翻译}
{{“Returningcustomer？Loginhere..”{翻译}
{{“用户名”|翻译}
{{“密码”|翻译}
{{buttonext2}}
送货地址
账单地址（与送货地址相同）
{{“交付方法”|翻译}
{{shipmethod.title}（${{shipmethod.cost |编号：'1.2-2'}}）
{{“你的命令”|翻译}
GH{{1*项目价格|编号：'1.2-2'}
{{“小计”|翻译}
GH{{1*值。小计|编号：'1.2-2'}
{{“总计”|翻译}
GH{{1*值。总数：'1.2-2'}
{{“SelectPaymentMethod”| translate}
{{method.value.title}
{{“我同意”|翻译}{{“条款和条件”|翻译}
{{“PlaceOrder”| translate}
您可以选择禁用提交按钮

<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
   }
}