Angular Form validation values asssign to interface

Question

Here I'm having simple form as

<form [formGroup]="loginform">
<input type="text" formControlName="EmailId"/>
<input type="text" formControlName="password"/>
<button [disabled]="!loginform.valid" (click)="ValidateUser()"></button>
<form>

My Ts code as loginform!:FormGroup; Here im mentioned my validation as

ngOnInit(): void {
    this.loginform=this.fb.group({
      EmailId:['',[Validators.required]],
      password:['',[Validators.required]
    })
  }

Geing values as

 get f(): { [key: string]: AbstractControl } {
    return this.loginform.controls;
  }

Here is my Interface

export interface logindetails{
    EmailId:string;
    password:string;
}

on my submission

ValidateUser(objuser:logindetails){
} 

from my HTML to here how can I bind values to my interface?

Answer 1

You can simply add these on your .ts file:

onEmailIdChanged(event:any){
    this.EmailId = event.target.value;

  }
  onPasswordChanged(event:any){
    this.password = event.target.value;
  }

and on your .HTML do this:

<input type="text" formControlName="EmailId" (change)="onEmailIdChanged($event)/>
<input type="text" formControlName="password" (change)="onPasswordChanged($event)/>