角4はtypescriptモデルへのHTTP応答をバインドします

Question

私はユーザーからの入力を得る角4のページを持っています。私は個々のコントロールの検証をしています。送信時には、サーバーの検証（基本的にすべての検証を再確認）を行い、フィールド名がtrueまたはfalseの配列としてエラーを返し、失敗した場合はエラーを返します。

これらのエラーをページのコントロールにマッピングし、エラーとして表示したいと思います。私は反応的なフォームを使用しており、サーバーの応答はフォームコントロールと同じ名前を使用します。

例では、コントロール名は「名前」です。提出後、その名前が無効であるという返答が返ってきます。私はコントロールの下にエラーメッセージを表示したいと思います。これは、送信エラーが各コントロールの横に表示されたときにMVCによく似ています。

これは可能ですか、どのようにすべてのフォームに使用できる汎用バインディングを生成するのでしょうか。

Answer 1

Yes, it is quite simple in angular. Here is an example how to do so. 

    1. HTML file. 

    <form [formGroup]="saveForm" (ngSubmit)="saveData()" > 
     <div> 
      <label>Name</label> 
      <input id="name" type="text" class="form-control" formControlName="name" tabindex="1"> 
     </div> 
     <div *ngIf="errror" > 
      <p>{{errorMsg}}</p> 
     </div> 

     <button type="submit" id="btnSave" >Save</button> 
    </form> 

2.In Component ts. 
a. Defined the formgroup & error message variable. 
    saveForm :FormGroup; 
    errror :boolean = false ; 
    errorMsg :any; 
b. Initialize form group. (You can defined client side validation here using angular validator) 
    this.saveForm = this.fb.group({ 
    name: [''] 
    }); 
c. On save data method you need to set the error bit true. 
saveData() { 
    let data = this.saveForm .value.name; 
    this._userService.save(data) // calling service here. 
     .subscribe(
     (response :any)=> { 
      console.log(response); 
      } 
     }, 
     (error :any) => { 
      this.error = true; 
this.errorMsg = error.error; // assigning server side errro to the variable. 
     } 
     ); 

    } 

That's done.