CODEWITHSUNDEEP
angularangular-materialmaterial-uiangular-forms
hali
hali

Reputation: 5

How to autopopulate an Input field based on the selection of a dropdown value in Angular?

I am trying to auto populate an input field based on the selected value of a dropdown. The following is the code and it is not working. Please suggest.

<form [formGroup]="employeeForm" (ngSubmit)="OnSubmit()">
    <mat-form-field appearance="outline">
                            <mat-label>Employee ID</mat-label>
                            <input type="text" placeholder="Employee ID" required formControlName="employeeidControl" matInput [matAutocomplete]="auto1">
                            <mat-autocomplete #auto1="matAutocomplete">
                                <mat-option *ngFor="let employee of employees" [value]="employee.id">
                                    {{ employee.id }}
    
                                </mat-option>
                            </mat-autocomplete>
                            <mat-error>
                                Employee ID is required
                            </mat-error>
                        </mat-form-field>
    
                        <mat-form-field appearance="outline">
                            <mat-label>Employee Name</mat-label>
                            <input type="text" matInput placeholder="Employee Name" value="{{employeeidControl.name}}" required 
                            formControlName="employeenameControl">
                           
                            <mat-error>
                                Employee Name is required
                            </mat-error>
                        </mat-form-field>
</form>

Upvotes: 0

Views: 2061

Answers (1)

klitown
klitown

Reputation: 35

If I understood correctly, you want to fill in the Name field based on the selected ID? Maybe in your mat-option put click event and pass the name to the ts. So:

<mat-option *ngFor="let employee of employees" [value]="employee.id" (click)="test(employee.name)"> {{ employee.id }} </mat-option>

and in ts:

  test(employeeName){
    this.employeeForm.get('employeenameControl').patchValue(employeeName)
  }

Upvotes: 1

Related Questions