Angular поле ввода материала не работает внутри mat-list или mat-option

Question

Привет, у меня есть такой код:

 <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>First name</mat-label>
        <input matInput readonly formControlName="firstName">
        <mat-list *ngFor="let username of mockLdap | async">
          {{username.firstName}}
        </mat-list>
      </mat-form-field>
    </div>

import { Component, OnInit, forwardRef } from '@angular/core';
import { HttpClientService, Employee } from '../service/http-client.service';
import { Router } from "@angular/router";
import { FormGroup, FormBuilder, Validators, FormsModule, NgForm } from '@angular/forms';
import { LDAPUsers } from "../LDAPUsers";
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.css'],
})
export class AddEmployeeComponent implements OnInit {

  LDAPUsers: LDAPUsers;
  ldapUsers: Observable<LDAPUsers[]>;
  user: FormGroup;
  mockLdap: Observable<LDAPUsers[]>;
  private searchTerms = new Subject<string>();

constructor(
    private router: Router,
    private httpClientService: HttpClientService,
    private formBuilder: FormBuilder

  ) { }

  search(term: string): void {
    this.searchTerms.next(term);
    console.log(term);
  }

  ngOnInit(): void {
    this.user = this.formBuilder.group({
      id: [],
      userName: [''],
      firstName: [''],
      lastName: [''],
      mobile: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });

   this.httpClientService.getLDAPUser('username').subscribe
      (data => {
        this.LDAPUsers = data;
        console.log(JSON.stringify(data));

        this.user.patchValue(data);
      }
      )

createEmployee() //some code here
}

МОЯ цель - иметь поле input внутри тега mat-list или объединить их каким-либо образом, потому что сейчас он работает как полученные данные попадают в поле mat-list, которое отображается на моей странице, но данные полей ввода отправляются, когда я нажимаю submit, который пуст. Все, что я пробовал до сих пор, приводило к ошибкам. Я попытался удалить тег ввода или поместить его внутри mat-form-field, а затем внутри mat-list, но ни один не помог. Если у кого-то есть какое-то решение, оно мне очень поможет.

Answer 1

Вы добавили MatInputModule в свой модуль?