I would like to use a service but I get this error:
TS2345: Argument of type 'Partial<{ email: string | null; password: string | null; }>' is not assignable to parameter of type 'Login'.
Types of property '"email"' are incompatible. Type 'string | null | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
Service
public login(data: Login): Observable<string> {
return this.httpClient.post<string>(environment.apiUrl '/login', data);
}
Interface
export interface Login {
"email": string,
"password": string
}
Component
export class LoginComponent implements OnInit {
loginForm = this.fb.group({
'email': ['', [Validators.email, Validators.required]],
'password': ['', Validators.required]
})
constructor(private loginService: LoginService, private fb: FormBuilder) { }
ngOnInit(): void {
}
submit() {
this.loginService.login(this.loginForm.value).subscribe(response => {
// Do sumth
})
}
}
Is there something wrong with my interface, or should the parameter data
have another data type?
CodePudding user response:
As @nullptr suggested, the correct way to handle this is to use TypeScript type narrowing:
submit() {
if (this.loginForm.value && typeof this.loginForm.value.email !== 'undefined' && this.loginForm.value.email !== null) {
this.loginService.login(this.loginForm.value).subscribe(response => {
// Do sumth
})
}
}
There might be a shorthand way but I've chosen to be explicit.
CodePudding user response:
Prueba esto en tu servicio
login(data:any):Observable<any>{
let json = JSON.stringify(data);
let params = 'json=' json;
let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
return this._http.post(environment.apiUrl '/login', params, {headers: headers});
}
Prueba esto en tu componente
submit() {
this.loginService.login(this.loginForm).subscribe(response => {
console.log(response);
})
CodePudding user response:
Remove quotations for interface variables.
export interface Login {
email: string,
password: string
}
also
submit() {
if (this.loginForm.value && typeof this.loginForm.value.email !== 'undefined' && this.loginForm.value.email !== null) {
this.loginService.login(this.loginForm.value).subscribe(response => {
// Do sumth
})
}
}
CodePudding user response:
Use getRawValue()
to bypass possible undefined fields
this.loginService.login(this.loginForm.getRawValue()).subscribe(response => {
// Do sumth
})
CodePudding user response:
you can simply cast the value as the expected type, but I would make sure your form is valid first!
submit() {
this.loginForm.markAllAsTouched();
if (this.loginForm.valid) {
this.loginService.login((this.loginForm.value as Login)).subscribe(response => {
// Do sumth
})
} else {
// handle invalid form
}
}