web-dev-qa-db-ja.com

Ionic 3の形式でエラーメッセージを表示する方法

ここでは、Ionic-3のformsにエラーメッセージを表示しようとしています。

これが私のemail.htmlファイルです。

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

私のemail.tsファイルには、

export class EmailSignupPage {

   form : FormGroup;

   constructor(
       private formBuilder: FormBuilder,
       public navCtrl: NavController,
       public navParams: NavParams,
   ) {
       this.form = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required, Validators.email])]
       });
   }

   ionViewDidLoad() {

   }

   next() {
       this.navCtrl.Push(CredentialPage);
   }

   cancel() {
       this.navCtrl.popToRoot();
   }
}

私のコードはemail.tsファイルで問題ないと思いますが、ionic and angular！

これを手伝ってくれる人はいますか？

ありがとう！

angularvalidationionic-frameworkionic3
4
Hiren Gohel

*ngIf条件でこの問題を修正しました。

私は以下のコードを設定し、それが私のために働いています：

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

私だけを使用する必要があります：

<p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

の代わりに

<p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

エラーがある場合、それは単にエラーを示しています！

@JMMベストアンサーをありがとう、あなたは天才です！これだけ必要です*ngIf="form.controls['email'].errors && form.controls['email'].dirty"

みんなありがとう！

7
Hiren Gohel

検証時にフォームにエラーを表示する方法がわかりません

一部の場所でエラーを表示するだけの場合は、*ngIfディレクティブが必要です。エラーメッセージを必要な場所に配置し、*ngIfを追加して、メッセージを表示する必要がある場合を示します。

<p *ngIf="emailIsCorrect">error message: incorrect email</p>の基本的な考え方は、メッセージを表示するかどうかを反映するように更新するプロパティをクラス（.tsファイル内）に含めることです。主なアイデアは、チェック/検証を実行してemailIsCorrectプロパティを更新するメソッドをtsファイルで使用することです。
例として、(keypress)="performCheckOnKeyPress($event.keyCode)"の<ion-input ...>属性を使用して、ユーザーがキーを押したときに検証メソッドを呼び出すことができます。

詳細については、以下を参照してください。

カスタムチェックと検証の実行

Ionic-3のformsにエラーメッセージを表示しようとしました。

いくつかの選択肢があります：

コンテンツ/エラーメッセージを条件付きで表示する： Angular2 *ngIfディレクティブ は、変数の状態に基づいて物事を非表示にします.tsファイル内。
*ngIfはJavaScript ifのように機能します：*ngIf="myVar" <=> if (myVar){}。未定義またはfalse myVarはコンテンツを表示しません。使用例については、ドキュメント内の例をご覧ください。

カスタム検証の実行：追加のpropertiesおよびメソッドを追加することを選択できます.tsファイルのクラスに追加し、*ngIfを使用して条件付きでコンテンツを表示します。
JavaScriptチェックを使用して次のこともできます。

  • 選択を無効にします（コードで<button [disabled]=""...>を使用して行われるため）
  • ternaryチェック{{variable ? 'basic-class':'error-class' }}を使用して、テキストやCSSクラスなどのコンテンツを設定します。 <p>{{ foo() }}</p>（foo(){ return "some text"; }）のようなメソッド呼び出しを使用することもできます。
  • タグの属性を使用して、特定のイベントが発生したときにカスタムチェックを実行します（JavaScriptで行うようにonclick => (click)=""、onkeypress => (keypress)=""、.. 。）。
  • すべてのエラーメッセージを1つの変数に格納し、それらを<span>Please correct the following fields **email** and **password**</span>のように1か所に表示する場合（電子メールとパスワードの両方のフィールドが検証に合格しない場合）、<span>{{ errorMessagesVariable }}</span>を使用できます。
  • angular2 ngModelディレクティブ とドキュメントで提供されている例もご覧ください。実際、<form [formGroup] ...>を使用すると、電子メールやその他のコンポーネントの基本的な検証が行われ、formGroupは、.tsファイルで宣言した変数form: FormGroup;のフィールドを自動的に更新します。

前述の要素は、一部のユースケースのベストプラクティスを反映していない場合があります。これらは、ionicフレームワークについてのあなた自身の知識のために言及されています。

例：

たとえば、次の3項は、ionic開発では良い習慣です。

<ion-label color="{{ form.controls.email.errors && form.controls.email.dirty ? 'danger' : 'primary' }}" floating> Email </ion-label>

キープレスイベントの処理：

<ion-input [formControl]="form.controls['email']" (keypress)="performCheckOnKeyPress($event.keyCode)"></ion-input>.


コードのエラー

HTMLの問題：

コードにエラーがあり、有効かどうかに関係なく送信されます。

<button>をフォームに配置すると、そのボタンが押されると、フォームに提供したフォーム送信メソッド（<form (submit)="signIn()" ...>）がトリガーされます。この場合、CANCELボタンを押してもフォームが送信されます。

修正：[キャンセル]ボタンと[次へ]ボタンを隣り合わせたい場合は、両方を<form>...</form>の外に移動することをお勧めします鬼ごっこ。 [次へ]ボタンをフォームの外に移動すると、フォームは送信されなくなります（next()メソッドを呼び出すだけです）。

<form>の外でもフォームを送信する場合は、signIn()メソッドをクリックして呼び出します。つまり、(click)="next(); signIn()"です。

注：(click)="..."およびその他のangularディレクティブ属性（*ngIf="..."でも機能）に対しては、かなりプレーンなJavaScriptを記述できます。ただし、このJavaScriptにはいくつかの制限があります。しかし、あなたがそこに置きたいJSコードを試してください...


ionic v1開発者向けの注意

Ionic 1の使用angular 1. Ionic v2/v3 use angular 2.導入された変更点angular 2：

  • (keypress)=""、(click)=""はng-keypress=""とng-click=""を置き換えました。
  • *ngIf、*ngForはng-ifとng-forに置き換えられました
10
JMM