Submit form.value to signIn method

For example, we use the form as FormGroup for SignIn. Then we have incorrect data gets to BackEnd. For example we have SignIn form, it contains the next object -

{
  email:"[e-mail]"
  password:"123456789"
}

And when sending to RailsApp, we get such parameters -

Parameters: {"email"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}, 
"session"=>{"email"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}}}

I think should overwrite signIn/signUp methods such way, so that they can pass form.value method. What do you think about it?

Example signIn.component.ts (code such similar with article about FormValidataion

import { Component OnInit} from '@angular/core';
import {Router} from '@angular/router';
import { Angular2TokenService } from 'angular2-token';
import { AuthData } from '../shared/auth/auth';
import {FormBuilder, Validators, FormGroup} from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'sign-in',
  templateUrl: 'sign-in.component.html'
})
export class SignInComponent implements OnInit{
  signInForm: FormGroup;
  formErrors = {
    'email': '',
    'password': ''
  };

  validationMessages = {
    'email': {
      'required': 'Name is required'
    },
    'password': {
      'required': 'Password is required'
    }
  };
  private errors: string[];

  constructor(private _tokenService: Angular2TokenService,
              private router: Router,
              private fb: FormBuilder) { }

  ngOnInit(): void {
    this.buildForm();
  }

  buildForm(): void {
   this.signInForm = this.fb.group({
     'email': [this._authData.email,[
       Validators.required
      ]
     ],
     'password': [this._authData.password]
   });
    this.signInForm.valueChanges
      .subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }

  onValueChanged(data?:any) {
    if (!this.signInForm) {return;}
    const form = this.signInForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  // Submit Data to Backend
  onSubmit() {
    this._tokenService.signIn(
      this.signInForm.value
    ).subscribe( res => this.router.navigate(['/']),
                 err => this.errors = err.json().errors);
  }

Example signIn.component.html

<h2>Sign in</h2>
    <form class="ui form" id="new_user" (ngSubmit)="onSubmit()" [formGroup]="signInForm">
    <div class="field">
      <input placeholder="username" autofocus="autofocus"  type="text" formControlName="email" required>
    </div>

    <div class="field">
      <input placeholder="password" autocomplete="off"  type="password" formControlName="password" required>
    </div>

    <div class="actions field">
      <button [disabled]="!signInForm.valid" type="submit" class="ui primary button large fluid">Sign In</button>
    </div>
  </form>

[neroniaky]

@rafaelss95 Thank you for your input. I’m working on version 0.2.0 which is supposed to support passing the entire object. Hope to publish it soon.

[rafaelss95]

@neroniaky, well, as a suggestion I think would be better if we could pass the whole object to the functions. And about a possible problem with Rails and Angular2, I have some services implemented and I don’t got any kind of error (I usually do the following):

Component:

this.userService.login({'user': this.form.value})

Service:

login(body: {}): Observable<Response> {
  const bodyString = JSON.stringify(body);
  const headers = new Headers({ 'Content-Type': 'application/json' });
  const options = new RequestOptions({ headers: headers });
  return this.http.post(this.apiUrl, body, options);
}

So, I get the following code, which works perfectly:

Processing by Devise::SessionsController#create as JSON
  Parameters: {"user"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}, "session"=>{"user"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]"}}}