What is the data type of this.loginForm.value?

userjFFl1 0
Viewed 54

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?

typescript angular
5 Answers

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.

Robert Rendell0

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
      })
    }

  }
krishna chaitanya0

Use getRawValue() to bypass possible undefined fields

this.loginService.login(this.loginForm.getRawValue()).subscribe(response => {
      // Do sumth
    })
Chellappan வ0

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
  }
}
ye-olde-dev0

Try this in your service:

    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});
}

Try this in your component:

submit() {
this.loginService.login(this.loginForm).subscribe(response => {
  console.log(response);
})
nelson andres agreda villota0
Related