角4綁定HTTP響應typescript模型

Question

我有一個角4頁，從用戶獲得輸入。我確實對個別控件進行了驗證。在提交時，我想做服務器驗證（主要是重新檢查所有驗證），並將任何錯誤作爲字段名稱返回，如果失敗，返回true或false。

我想這些錯誤映射到頁面上的控件並顯示爲錯誤。我正在使用反應形式，服務器響應將使用與窗體控件相同的名稱。

例如，控件名稱是'name'。提交後，我得到一個迴應，該名稱是無效的。我想顯示和控制下的錯誤消息。當提交錯誤顯示在每個控件的旁邊時，這很像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.