Angular 6：使用[formControl]无法从FormGroup获取值问题

你遇到的核心问题是：你创建了一个独立的FormControl实例Client，但它并没有和searchForm里的client表单控件关联起来。这两个是完全分开的控件，输入框的值存在Client里，而你却去searchForm.get('client')里取值，自然拿不到数据。

下面给你两种可行的解决方式，选一种就行：

方式一：直接关联FormGroup中的client控件（更推荐） #

不需要单独创建Client这个FormControl，直接用searchForm里的client控件来实现自动完成：

修改后的Typescript代码： #

export class TransactionSearchComponent implements OnInit{
  constructor(private fb:FormBuilder,private transactionService:TransactionService,
              private LoginvalidationService:LoginvalidationService,
              private ExcelService:ExcelService){}
  searchForm:FormGroup;
  clientfilteredOptions: Observable<string[]>; // 补充类型定义

  ngOnInit(): void {
    this.searchForm=this.fb.group({
      client:[''], // 保持原有定义
    })

    // 直接用searchForm中的client控件监听值变化
    this.clientfilteredOptions = this.searchForm.get('client').valueChanges
      .pipe(
        startWith(''),
        map(value => this._Clientsfilter(value))
      );
  }

  private _Clientsfilter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter(option => option.toLowerCase().includes(filterValue));
  }

  searchTransaction(){
    console.log(this.searchForm.get('client').value); // 现在能正常拿到值了
  }
}

修改后的HTML代码： #

<form class="form-horizontal" novalidate autocomplete="off" (ngSubmit)="searchTransaction()" [formGroup]="searchForm">
  <mat-form-field *ngIf="searchForm.get('searchType').value==2" class="example-full-width">
    <!-- 用formControlName关联到FormGroup的client，同时保留自动完成逻辑 -->
    <input matInput placeholder="Integrated Client" formControlName="client" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of clientfilteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

方式二：将独立的FormControl注册到FormGroup中 #

如果你一定要保留Client这个独立的FormControl实例，可以把它注册到searchForm里，让两者关联：

修改后的Typescript代码： #

export class TransactionSearchComponent implements OnInit{
  constructor(private fb:FormBuilder,private transactionService:TransactionService,
              private LoginvalidationService:LoginvalidationService,
              private ExcelService:ExcelService){}
  searchForm:FormGroup;
  Client = new FormControl(); // 保留独立实例
  clientfilteredOptions: Observable<string[]>;

  ngOnInit(): void {
    this.searchForm=this.fb.group({
      client: this.Client, // 将独立的Client实例注册到FormGroup的client字段
    })

    this.clientfilteredOptions = this.Client.valueChanges
      .pipe(
        startWith(''),
        map(value => this._Clientsfilter(value))
      );
  }

  private _Clientsfilter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter(option => option.toLowerCase().includes(filterValue));
  }

  searchTransaction(){
    console.log(this.searchForm.get('client').value); // 现在能拿到值，和this.Client.value是同一个
  }
}

HTML代码可保持原有写法： #

<form class="form-horizontal" novalidate autocomplete="off" (ngSubmit)="searchTransaction()" [formGroup]="searchForm">
  <mat-form-field *ngIf="searchForm.get('searchType').value==2" class="example-full-width">
    <input matInput placeholder="Integrated Client" [formControl] = "Client" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of clientfilteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

简单总结：

• formControlName会自动关联到父FormGroup中对应的控件
• [formControl]是绑定独立的FormControl实例，若想和FormGroup关联，要么把实例注册到FormGroup，要么直接用FormGroup内的控件实例

内容的提问来源于stack exchange，提问作者bala3569