web-dev-qa-db-ja.com

送信時に検証メッセージをAngular 4反応フォームに表示

Angular 4、リアクティブフォームを使用しています。ユーザーが[送信/作成]ボタンをクリックしたときに検証エラーメッセージを表示したいのです。使用しているHTMLおよびTypeScriptコードは次のとおりです。

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">

  <div class="form-group">
    <input type="text" 
           id="firstname" 
           name="firstname" 
           formControlName="firstname" 
           placeholder="First Name">
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
           class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <input type="text" 
           id="lastname" 
           name="lastname" 
           formControlName="lastname" 
           placeholder="Last Name">
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
           class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <button type="submit" 
            class="btn btn-success btn-lg btn-qte">Create Account</button>
  </div>

</form>

タイプスクリプトコード

export class UserRegistrationComponent implements OnInit {
    signupForm: FormGroup;

    ngOnInit() {
        this.signupForm = new FormGroup({
            'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),
            'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),
            'businessname': new FormControl(null),
            'phonenumber': new FormControl(null, [Validators.required]),
            'email': new FormControl(null, [Validators.required, Validators.email]),
            'password': new FormControl(null, [Validators.required]),
            'confirmpassword': new FormControl(null, Validators.required)

        });
    }

    onSubmit() {
        console.log(this.signupForm)
    }

}
angularformstypescriptangular-reactive-forms
6
Tayyab Rahman

何かのようなもの

onSubmit() {
    console.log(this.signupForm)
    this.signupForm.controls['firstname'].markAsTouched()
}
16
user3733648

これはfrom markAllAsTouched()メソッドを使用して行うことができます。すべてのフォームコントロールにタッチ済みのマークを付け、そうすることで、必要に応じて検証エラーをトリガーします

onSubmit() {
    this.signupForm.markAllAsTouched();
}
4
omer

touchedを使用してフォームコントロールのdirty、valid、formGroupなどのプロパティを取得するには、次を使用します。

signupForm.controls.firstname.touched。同様に、有効や無効などの他のプロパティを取得できます。

FormControlの個別のオブジェクトを作成した場合、formGroupを使用せずに、そのオブジェクトのプロパティにfirstname.touchedとしてアクセスできます。

モデル駆動型フォームの検証の詳細については、ここを参照してください モデル駆動型フォームの検証 。

1
Ankit Prajapati