title: Reactive form to create and edit information
body: <p>I am beginner in Angular, I am working with users information so, in my page I have the option to create a new user, in down I have a table that show the user's information. In this I have 3 buttons, Details, Edit and Drop, I have a modal to see and edit the information so, I am using a index to know what is the &quot;row&quot; or &quot;user&quot; selected, Details and Delete are working fine; but when I test the edit function is getting a empty form to my service, is strange because when I click again on edit for this particular user the &quot;new&quot; information is there. I am trying to use the same reactive Form that I am using for create new user . Someone can help me to undestand what I am doing wrong? Thanks a lot</p>
  <p>This is my html table-modal code</p>
  <pre><code>&lt;table&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Last Name&lt;/th&gt;
                    &lt;th&gt;Email&lt;/th&gt;
                    &lt;th&gt;Country&lt;/th&gt;
                    &lt;th&gt;State&lt;/th&gt;
                    &lt;th&gt;Rol&lt;/th&gt;
                    &lt;th&gt;Details&lt;/th&gt;
                    &lt;th&gt;Edit&lt;/th&gt;
                    &lt;th&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr
                    *ngFor=&quot;let user of userMngmtService.getListUsers() | paginate: {  itemsPerPage: 20, currentPage: 1 } let i = index&quot;
                    [ngClass]=&quot;{restrictionColor: user.requiredFag==true}&quot; [attr.data-index]=&quot;i&quot;&gt;
                    &lt;td&gt;{{ user.name }}&lt;/td&gt;
                    &lt;td&gt;{{ user.lastname }}&lt;/td&gt;
                    &lt;td&gt;{{ user.username }}&lt;/td&gt;
                    &lt;td&gt;{{ user.country }}&lt;/td&gt;
                    &lt;td&gt;Active&lt;/td&gt;
                    &lt;td&gt;
                      &lt;option *ngFor=&quot;let role of this.userMngmtService.getListRoles()&quot;
                        [selected]=&quot;user.aptUserRoleEntity.user_role_id === role.role_id&quot;&gt;
                        {{user.aptUserRoleEntity.user_role_id === role.role_id ? role.name : ''}}
                      &lt;/option&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-download float-right&quot; data-toggle=&quot;modal&quot;
                        [attr.data-target]=&quot;'#exampleModal' + i&quot; (click)=&quot;details(user,this.userDetails = true)&quot;&gt;
                        &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                      &lt;/button&gt; &lt;/td&gt;
                    &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-download float-right&quot; data-toggle=&quot;modal&quot;
                        [attr.data-target]=&quot;'#exampleModal' + i&quot; (click)=&quot;editUser(user,this.userEdit = true)&quot;&gt;
                        &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;
                      &lt;/button&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-download float-right&quot; (click)=&quot;deleteUser(user.user_id)&quot;&gt;
                        &lt;i class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/td&gt;
                    &lt;!--Modal to Edit -&quot;userEdit == true&quot; /View Details - userDetaile == true--&gt;
                    &lt;div class=&quot;modal fade&quot; id=&quot;{{'exampleModal' + i}}&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
                      aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
                      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
                        &lt;div class=&quot;modal-content&quot;&gt;
                          &lt;div class=&quot;modal-header&quot;&gt;
                            &lt;label *ngIf=&quot;userDetails === true&quot;&gt;User Details&lt;/label&gt;
                            &lt;label *ngIf=&quot;userEdit === true&quot;&gt;Edit User&lt;/label&gt;
                            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                            &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-body&quot;&gt;
                            &lt;div class=&quot;router-container data-mapping-block&quot;&gt;
                              &lt;div class=&quot;card&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                  &lt;div class=&quot;container-fluid my-3&quot;&gt;
                                    &lt;div class=&quot;cards&quot;&gt;
                                      &lt;div class=&quot;card-header&quot;&gt;
                                        &lt;div class=&quot;tabbable-responsive&quot;&gt;
                                          &lt;div class=&quot;tabbable&quot;&gt;
                                            &lt;form class=&quot;toppart&quot; (ngSubmit)=&quot;editUserInformation()&quot; #frmUser=&quot;ngForm&quot;&gt;
                                              &lt;div class=&quot;card-body&quot;&gt;
                                                &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col col-3&quot;&gt;
                                                    &lt;label&gt; Name&lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                                                    &lt;label class=&quot;custom-control&quot; *ngIf=&quot;this.userDetails === true&quot;&gt; :
                                                      {{user.name}} &lt;/label&gt;
                                                    &lt;input class=&quot;custom-selectbox&quot; *ngIf=&quot;this.userEdit === true &quot;
                                                      type=&quot;text&quot; class=&quot;form-control&quot;
                                                      value=&quot;{{ user.name !=='null' ? user.name :  ''}}&quot; /&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col col-3&quot;&gt;
                                                    &lt;label&gt; Last Name&lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                                                    &lt;label *ngIf=&quot;this.userDetails === true&quot;&gt; : {{user.lastname}} &lt;/label&gt;
                                                    &lt;input *ngIf=&quot;this.userEdit === true &quot; type=&quot;text&quot;
                                                      class=&quot;form-control&quot;
                                                      value=&quot;{{ user.lastname !=='null' ? user.lastname :  ''}}&quot; /&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col col-3&quot;&gt;
                                                    &lt;label&gt; Email &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                                                    &lt;label *ngIf=&quot;this.userDetails === true&quot;&gt; : {{user.username}} &lt;/label&gt;
                                                    &lt;input *ngIf=&quot;this.userEdit === true &quot; type=&quot;text&quot;
                                                      class=&quot;form-control&quot;
                                                      value=&quot;{{ user.username !=='null' ? user.username :  ''}}&quot; /&gt;
                                                  &lt;/div&gt;
                                                &lt;/div&gt;
                                                &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col col-3&quot;&gt;
                                                    &lt;label&gt; Country &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                                                    &lt;label *ngIf=&quot;this.userDetails === true&quot;&gt; : {{user.country}} &lt;/label&gt;
                                                    &lt;select *ngIf=&quot;this.userEdit === true&quot;&gt;
                                                      &lt;option *ngFor=&quot;let country of this.listCountries&quot;
                                                        [selected]=&quot;user.country === country.name&quot; [value]=&quot;country.name&quot;&gt;
                                                        {{country.name}}
                                                      &lt;/option&gt;
                                                    &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col col-3&quot;&gt;
                                                    &lt;label&gt; Role &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                                                    &lt;div class=&quot;custom-control&quot; *ngIf=&quot;this.userDetails === true&quot;&gt;
                                                      &lt;option *ngFor=&quot;let role of this.userMngmtService.getListRoles()&quot;
                                                        [selected]=&quot;user.aptUserRoleEntity.user_role_id === role.role_id&quot;&gt;
                                                        {{user.aptUserRoleEntity.user_role_id === role.role_id ? role.name : ''}}
                                                      &lt;/option&gt;
                                                    &lt;/div&gt;
                                                    &lt;select *ngIf=&quot;this.userEdit === true&quot;&gt;
                                                      &lt;option *ngFor=&quot;let role of this.userMngmtService.getListRoles()&quot;
                                                        [selected]=&quot;user.aptUserRoleEntity.user_role_id === role.role_id&quot;&gt;
                                                        {{user.aptUserRoleEntity.user_role_id === role.role_id ? role.name : role.name}}
                                                      &lt;/option&gt;
                                                    &lt;/select&gt;
                                                  &lt;/div&gt;
                                                &lt;/div&gt;
                                              &lt;/div&gt;
  
                                            &lt;/form&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-footer&quot;&gt;
                            &lt;button type=&quot;button&quot; class=&quot;btn btn-reset&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
                            &lt;button type=&quot;button&quot; class=&quot;btn btn-submit&quot; data-dismiss=&quot;modal&quot; (click)=&quot;editUserInformation(frmUser)&quot;&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  <p>Typescript: As u can see I am using a boolean variable to know if the user is editing or seing the details</p>
  <pre><code>editUserInformation(usernameEdited: any) {
      console.log('EDIT DETAILS', usernameEdited);
      let saveUserInformation = {
        name: this.userEdit == true ? this.dataUser.name : this.dataUser.name,
        lastname: this.userEdit == true ? this.dataUser.lastname : this.dataUser.lastname,
        username: this.userEdit == true ? this.dataUser.email : this.dataUser.email,
        password: this.userEdit == true ? this.dataUser.password : this.dataUser.password,
        country: this.userEdit == true ? this.dataUser.country : this.dataUser.country,
        updated_by: localStorage.getItem('usernameUserIn'),
        aptUserRoleEntity: {
          user_role_id: this.userEdit == true ? this.dataUser.role : this.dataUser.role
        }
      }
      console.log('EDIT DETAILS', saveUserInformation);
      //this.sendUserData(user);
    }
  </code></pre>