<div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">account_circle</i>
                        <input type="text" #UserName ngModel name="UserName" placeholder="Username" required>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">key</i>
                        <input type="password" #Password ngModel name="Password" placeholder="Password" required>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">account_circle</i>
                        <input type="text" #Email ngModel name="Email" placeholder="Email" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col s4">
                        <p>
                            <input #Blocked ngModel name="blocked" type="checkbox" id="blocked_check_create" >
                            <label for="blocked_check_create">Blocked</label>
                        </p>
                        <p>
                            <input #Activate ngModel name="activate" type="checkbox" id="activate_check_create">
                            <label for="activate_check_create">Activate</label>
                        </p>
                    </div>
                    <div class="col s8">
                        <div class="input-field">
                            <div class="input-field col s12">
                                    <select multiple #Authorities ngModel name="authorities" id="authorities">
                                      <option value="" disabled selected>Choose your option</option>
                                      <option  *ngFor="let authority of athorities" value="{{ authority.id }}">{{ authority.name }}</option>
                                    </select>
                                    <label>Materialize Multiple Select</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

    </div>
    <div class="modal-footer">
            <button class="modal-action modal-close waves-effect waves-green btn-flat" (click)="onCreate(UserName.value , Password.value ,Email.value, Blocked.checked, Activate.checked, Authorities.value)">
                    Create
            </button>
    </div>
  </div>

onCreate(username : string , password : string , email : string, blocked : boolean , activate : boolean, authorities : any[]){
    this.userAdd.username = username;
    this.userAdd.password = password;
    this.userAdd.email = email;
    this.userAdd.blocked = blocked;
    this.userAdd.activate = activate;

    authorities.forEach(obj => {
        this.authorityTemp.id = obj.id;
        this.authorityTemp.name = obj.name;
        this.authoritiesToAdd.push();
    })

    this.userAdd.authorities = this.authoritiesToAdd;
    this.authorityTemp = null;
    this.authoritiesToAdd = null;

    this.userService.addUser(this.userAdd);
    this.userAdd = null;
  }

addUser(user: User): Observable<User> {
    let headers = new HttpHeaders().set('Content-Type', 'application/json');

    this.http.post(this.userAdd, user).subscribe((result) => {
      this.globalResponse = result;
    }, error => {
      //This is the part of the error
      console.log(error);
    }, () => {
      //This is the part of the success
      location.reload();
    });
    return;
  }