Question

我在Ionic Project中工作，我使用过表格，但是当我显示错误时，我的错误就不会出现。

这是我的 orderform.html ：

<ion-content padding>
  <p class="newp11">Order Number: {{orderpa}}</p>
  <h2 class="myformh2">Fill Your Account Detail's</h2>
  <form [formGroup]="cancelorderde" (ngSubmit)="cancelorderDetails()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="IFSC Code*" type="text" formControlName="ifsc_code" required></ion-input>
        <p *ngIf="cancelorderde.controls['ifsc_code'].errors" class="danger" padding>IFSC Code Is Not Valid</p>
      </ion-item>
      <div>
        <button [disabled]="!cancelorderde.valid" ion-button type="submit" class="newbtn11" color="primary" block>Cancel Order</button>
      </div>
    </ion-list>
  </form>
</ion-content>

在此html中，我显示了一个错误，但由于用户键入了错误的输入而没有出现。

这是我的 orderform.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-cancelorder',
  templateUrl: 'cancelorder.html',
})
export class CancelorderPage {
  cancelorderde : FormGroup;
  orderpa: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder) {
      this.cancelorderde = this.formBuilder.group({
        holder_name: ['', Validators.required],
        bank_name: ['', Validators.required],
        branch_name: ['', Validators.required],
        account_number: ['', Validators.required],
        ifsc_code: ['', Validators.compose([
          Validators.required,
          Validators.pattern('^[A-Za-z]{4}[a-zA-Z0-9]{7}$')
        ])],
        mobile_number: ['', Validators.compose([
          Validators.maxLength(10),
          Validators.minLength(10),
          Validators.required
        ])],
        reason: ['', Validators.required],
        remark: ['', Validators.required],
      });

     this.orderpa = navParams.get('orderno');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CancelorderPage');
  }

  cancelorderDetails()
  {
     console.log(this.cancelorderde.value);
  }

}

在此ts文件中，我已经验证了IFSC代码，但此后也没有出现错误，但是用户无法单击Submit Button。

我希望当用户输入错误的输入时，应该向用户输入错误，而当没有错误时，用户可以单击“提交”按钮。

非常感谢您的帮助。

Answer 1

只需尝试一下：它将起作用。

<ion-content padding>
  <p class="newp11">Order Number: {{orderpa}}</p>
  <h2 class="myformh2">Fill Your Account Detail's</h2>
  <form [formGroup]="cancelorderde" (ngSubmit)="cancelorderDetails()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="IFSC Code*" type="text" formControlName="ifsc_code" required></ion-input>
      </ion-item>
      <p *ngIf="cancelorderde.controls['ifsc_code'].errors && cancelorderde.controls['ifsc_code'].dirty && cancelorderde.get('ifsc_code').touched" class="danger" padding>IFSC Code Is Not Valid</p>
      <div>
        <button [disabled]="!cancelorderde.valid" ion-button type="submit" class="newbtn11" color="primary" block>Cancel Order</button>
      </div>
    </ion-list>
  </form>
</ion-content>

将 p标签移出商品标签。它将根据询问的问题显示错误并解决您的问题。

用户在Ionic中键入一些值后无法显示错误

1 个答案: