angular7 querystring user enter the id and password getting undefined - angular7

Question

```
**Below code working fine as expected but getting Id and Password
'undefind&undefind'.**
**I need to show user enter details.Like ID:test and Password;test123
Could you please help me on this.**
**am getting this format.**
http://localhost:8089/api/Logins/CheckPassword?ID=[undefind]&Password=
[undefind
need this format
http://localhost:8089/api/Logins/CheckPassword?ID=[test]&Password=[test123]
```text
Can anyone help me please?
**login.services**
```
getLoginById(UserID: string,Password: string): Observable<Login[]>{
debugger;
let params=new HttpParams().set('ID', UserID).set('Password',Password);
console.log(params.toString());
return this.http.get<Login[]>(this.baseURL,{params});
}
```
**login.component.ts**
```typescript
constructor(
// private formbuilder: FormBuilder,
private loginService: LoginService,
private router:Router,
private route: ActivatedRoute, private formbuilder: FormBuilder)
{}
onFormSubmit() {
this.loading = false;
const client = this.clientForm.value;
this.getLogin(client);
this.clientForm.reset();
}
ngOnInit() {
debugger;
this.clientForm = this.formbuilder.group({
UserID: ['', [Validators.required]],
Password: ['', [Validators.required]]
});
}
getLogin(login :Login){
debugger;
this.loginService.getLoginById(this.clientForm.UserID,this.clientForm.Passwor
d).subscribe(() => {
this.loading = true;
});
}
```
```text
**login.component.html**
```
<div class="container">
<mat-card>
<mat-toolbar color="accent">
<div align="center" style="color:white;text-align:right;">
Login
</div>
</mat-toolbar>
<br>
<br>
<mat-card-content>
<form [formGroup]="clientForm"
(ngSubmit)="onFormSubmit(clientForm.value)">
<table>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="UserID" matTooltip="Enter login UserID"
matInput placeholder="UserID">
</mat-form-field>
<mat-error>
<span *ngIf="!clientForm.get('UserID').value &&
clientForm.get('UserID').touched">
</span>
</mat-error>
</td>
</tr>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="Password" matTooltip="Enter login
Password" matInput placeholder="Password">
</mat-form-field>
<mat-error>
<span *ngIf="!clientForm.get('Password').value &&
clientForm.get('Password').touched">
</span>
</mat-error>
</td>
</tr>
</table>
<table>
<tr>
<td class="content-center">
<button type="submit" mat-raised-button color="accent"
matTooltip="Click Submit Button" [disabled] =
"!clientForm.valid">Login</button>
<button type="reset" mat-raised-button color="accent"
matTooltip="Click Reset Button" (click) =
"resetForm()">Reset</button>
</td>
</tr>
</table>
</form>
</mat-card-content>
</mat-card>
</div>
```

Answer 1

As Daniel A. White says, it's not a good idea to pass username and password in url parameters as you ask to do.
You'll open a huge security hole and everyone who can intercept your request can stole you your sensitive data.
Anyway if you wish to do this kind of operation, assuming
http://localhost:8089/api/Logins/CheckPassword?ID=[UserID]&Password=[Password]
refers to an endpoint (web api), you have to use this.http.get() this way:
const params: {
'params': {
'ID': userID,
'Password': password
}
};
this.http.get('http://localhost:8089/api/Logins/CheckPassword', params);