Не удается отобразить ошибки после ввода пользователем какого-либо значения в Ionic - PullRequest
0 голосов
/ 11 февраля 2019

Я работаю в 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);
  }

}

В этом файле я проверил код IFSC, но после этого также не появляется ошибка, но пользователь не может нажать кнопку «Отправить».

Я хочу, чтобы, когда пользовательвведите неправильный ввод, это должно произойти с ошибкой для пользователя, и, если ошибки нет, пользователь может нажать кнопку отправки.

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 12 февраля 2019

Просто попробуйте это: Это будет работать.

<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 тег из элемента тега .Он покажет ошибку в соответствии с заданным вопросом и решил вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...