Question

我正在尝试根据下拉列表的选定值自动填充输入字段。以下是代码，它不起作用。请提出建议。

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

Answer 1

如果我理解正确，您想根据所选 ID 填写 Name 字段吗？也许在您的 mat-option 中放置 click 事件并将名称传递给 ts。所以：

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

在 ts 中：

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

如何根据 Angular 中下拉值的选择自动填充输入字段？

1 个答案: