web-dev-qa-db-ja.com

Angular 2送信時のトリガーフォーム検証

angular 2でフォームを作成し、いくつかのカスタムバリデーターを追加しました。ユーザーが送信ボタンをクリックした場合にフォーム検証をトリガーしたいと思います。フォームが無効である限り無効になっていますが、送信ボタンを常に有効にして、ユーザーが送信をクリックしたときにフォームを検証する必要があります。この作業を行う方法と使用するTypeScriptメソッドを知っていますか？ updateValueAndValidityメソッドを見つけましたが、このメソッドでは機能しないようです。

validationangulartypescriptangular2-forms
14
Snake

テンプレート駆動型フォームを使用している場合、次の構文を使用できます。

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean){
   if(isValid){
       //do something
   }
}

次のように送信時にエラーを追加することもできます。

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>
15
dev_in_progress

検証は、モデルを変更するたびに実行する必要があります。しかし、おそらくFormControlが変更されていないため、エラーメッセージは表示されませんか？ここに私のソリューションは正常に動作します。

次の簡単な手順でそれを行いました。

  1. FormGroupDirectiveを注入するFormComponent（セレクター「フォーム」）を実装します（送信イベントをサブスクライブし、送信済みをtrueに設定します）
 
 @Component（{
 selector： 'form'、
 templateUrl： 'form.component.html'、
 styleUrls：['form .component.scss '] 
}）
エクスポートクラスFormComponentはOnInitを実装します{
 @Output（）submit = new EventEmitter（）; 
 
 constructor（@Optional（）private formGroupDirective：FormGroupDirective）{
} 
 
 ngOnInit（）{
 if（this.formGroupDirective）{
 this .formGroupDirective.ngSubmit.subscribe（（）=> {
 this.formGroupDirective.form ['submitted'] = true; 
}）; 
} 
} 
 
}

重要な行はngOnInitにあります

  1. エラーを表示するために送信されたフォームを確認してください

    * ngIf = "control？.hasError（ 'required'）&&（control？.touched || form？.submitted）"

役立つことを願っています

1
DaniS

（リアクティブフォーム）

それに問題があった私の解決策は：

- テンプレート

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button>

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup">
...
</form>

-クラス

@ViewChild('f') f: FormGroupDirective;

submit(formDirective: FormGroupDirective) {
  console.log('valid', formDirective.valid);
  console.log('value', formDirective.value);
}

これは、フォームにないボタンがあるフォームを送信するために使用するソリューションです。

ありがとう

0
Yuriy Yakovenko

コンポーネントhtmlファイル：フォームの送信中に送信機能を呼び出すには、フォームグループモデルをフォームタグとngsubmitメソッドに追加する必要があります。各入力フィールドにformControlNameを追加してください。名前はコンポーネントtsファイルで宣言したものと同じである必要があります。 mat-errorは、検証エラーを表示します。制御エラーを検証してtrueまたはfalseを返す* ngIfで1つの戻り型関数を渡します。 trueを返す場合、mat-errorを示しています。

<form [formGroup]="Addform" (ngSubmit)="submit(Addform)">
   <h1 mat-dialog-title>Add Field</h1>
   <mat-dialog-content>
      <mat-form-field>
         <input matInput formControlName="make" placeholder="Make...">
         <mat-error *ngIf="hasError('make', 'required')">Make is required</mat-error>
      </mat-form-field>
   </mat-dialog-content>
</form>

コンポーネントtsファイル最初に、FormGroupタイプのAddFormグ​​ループを宣言する必要があります。 FormBuilderを使用して、この特定のフォームグループにルールを設定する必要があります。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-comp',
  templateUrl: './app-comp.html'
})

export class CustomAddForm implements OnInit {
   Addform: FormGroup;
   submitted = false; // by default set submitted to false
   constructor(
     private formBuilder: FormBuilder
   ) {}

   ngOnInit() {
     // initialization time assign the form control rules to form builder.
     this.Addform = this.formBuilder.group({
      make: ['', Validators.required]
     })
   }

   // getter function to provide the control validation info to html 
   public hasError = (controlName: string, errorName: string) =>{
      return this.Addform.controls[controlName].hasError(errorName);
    }

   // submit function
   submit(Addform) {
      if (this.Addform.invalid) { 
      // if condition to check the form group validation.
      // show validation alert here.
         return;
     }

      this.submitted = true;
      // add you success code here.

   }

}
0
Dheeraj Kumar

Angular Material（MatFormFieldModule）を使用して、両方の検証を実行できます（送信ボタンですべてのエラーをエラーメッセージとともに表示し、個別にエラーメッセージを表示）。長い研究開発の後、私の問題は解決しましたが、最初にangular material。

サンプルコード：-

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value,loginForm)"> 
 <mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="email">
      <mat-error *ngIf="loginForm.controls['email'].hasError('required')">Required</mat-error>
      <mat-error *ngIf="loginForm.controls['email'].hasError('email')">Invalid Mail</mat-error>
 </mat-form-field>
</form>

login.tsファイルコード：

private createLoginForm() {
  this.loginForm = this.fb.group({
    email: new FormControl('', [Validators.required, Validators.email]),
  })
}

要件に応じて、さらにバリデーターを添付できます。

0
nagender pratap chauhan