Submit form.value to signIn method
See original GitHub issueFor 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:"admin@mail.com"
password:"123456789"
}
And when sending to RailsApp, we get such parameters -
Parameters: {"email"=>{"email"=>"admin@mail.com", "password"=>"[FILTERED]"},
"session"=>{"email"=>{"email"=>"admin@mail.com", "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>
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Sign-in form best practices - web.dev
Ensure successful form submission. Use autocomplete="new-password" and id="new-password" for the password input in a sign-up form, and for the ...
Read more >Submit form post to login - javascript - Stack Overflow
Submit form post to login ; "form1" Method ="POST" ; id="main_body" ; id = "usernameLogin" ; id = "passwordLogin" ; "click_button_login()" value=" ...
Read more >How To Create a Login Form - W3Schools
Try it Yourself ». How To Create a Login Form. Step 1) Add HTML: Add an image inside a container and add inputs...
Read more >How to pass Form values to another page after Login in ...
I have created a form on Product Page. Following is the code: <form method=”POST” action=”http://www.example.com/checkout”> <div ...
Read more >Working with forms - Django documentation
When the <input type="submit" value="Log in"> element is triggered, the data ... Django's login form is returned using the POST method, in which...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.
@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:
Service:
So, I get the following code, which works perfectly: