角4フォームの検証とエラーメッセージ

Question

私のアプリケーションでフォームの検証を実装する必要があります。私は角度4を使用しています。私のアプリケーションにはさらに10種類のフォームがあります。私の質問が有効かどうかはわかりません。私はこの実装と本当に混乱しています。

私の質問： 電子メール、電話番号などの必須フィールドと検証フィールドなどのフォームフィールドに検証を追加する必要があります。ユーザーがフォームを入力すると、ユーザーはいくつかのフィールドを知っています。ユーザーは他のフィールド。しかし、有効なフィールドを保存し、エラーメッセージをフォームに表示する必要があります。

どのように私は、フロントエンドに私はフォームでの作業時はいつでもReactiveFormsModuleを使用することをお勧めnodejs

Answer 1

で角度4とバックエンドを使用しています実装することができます。あなたがそれに精通していない場合は、ドキュメントをチェックしてくださいが、それは非常に簡単なので、それほど大きな問題ではありません。

form: FormGroup; 

constructor(formBuilder: FormBuilder){ 
    this.form = formBuilder.group({ 
     name: ['', Validators.required], 
     lastName: '', 
     email: ['', [Validators.required, Validators.email]] 
    }); 
} 

だから、基本的には、ここで何が起こっているかは、反応性フォームで作業する場合、我々はFormGroupインスタンスを必要とすることです。 FormBuilderクラスを使用し、groupメソッドを呼び出します。このメソッドは、作成するフォームのオブジェクトを受け取り、FormGroupインスタンスを返します。私たちが渡すオブジェクトの各プロパティは、FormGroupのFormControlsとして知られています。この例では、name、lastName、およびemailという3つのFormControlを持つFormGroupを宣言しています。

これらのFormControlの値は、初期化に使用され、そのFormControlの実際の値、または最初の要素がそのFormControlの値になる配列のいずれかです.2番目の値はValidatorFnまたは。

ご覧のとおり、FormControlという名前をname: ['', Validators.required]というように定義しました。つまり、初期値は空の文字列になり、このFormControlが必要です。 lastNameは、空の文字列です。なぜなら、そのフィールドの検証は必要ないからです。このFormControlには複数のバリデータが必要なので、電子メールはもっと面白いので、配列に渡します。

そして今、私たちのテンプレートでこのすべてを実装することにも非常に簡単です

<form [formGroup]="form"> 
    <div> 
     <input formControlName="email"> 
     <div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div> 
     <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div> 
    </div> 
    ... 

そして、あなたは、ユーザーがそれが有効になるまでフォームを送信できるように許可したくない場合：<button [disabled]="form.invalid">Save</button