角材料输入字段在垫列表或垫选项内不起作用

时间:2020-01-08 09:14:31

标签: angular angular-material angular-forms

嗨,我有这样的代码:

 <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字段一样,但是输入字段数据是在我按“提交”时发送的,这是空的。到目前为止,我所做的一切都导致错误。我尝试删除输入标签或将其放入mat-form-field内,然后放入mat-list内,但均无效果。如果有人有某种解决方案,那会对我有很大帮助。

1 个答案:

答案 0 :(得分:0)

您是否已在模块中添加MatInputModule?