Не удалось получить значение из formcontrol angular 6

Question

Я пытаюсь получить значение из угловой группы форм.

Когда я использую formControlName, я могу получить значение, но когда я использую [formControl], я не могу прочитать значение.

Я использую [formControl], так как мне нужно иметь автозаполнение для поля ввода. Вот мой код

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>   

Машинопись :

export class TransactionSearchComponent implements OnInit{
constructor(private fb:FormBuilder,private transactionService:TransactionService, private LoginvalidationService:LoginvalidationService, private ExcelService:ExcelService){   }
searchForm:FormGroup;
Client = new FormControl();

ngOnInit(): void {

        this.searchForm=this.fb.group({
                     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);
}

Answer 1

Вам не нужно определять элемент управления формы следующим образом:

Client = new FormControl();

просто используйте:

this.searchForm=this.fb.group({
                 client:[''],
             })
this.searchForm.controls.get("client").valueChanges.subscribe((value)=>{
      //Do something
});

и для представления используйте:

formControlName="client" // small one

Answer 2

Я бы предложил вместо использования * ngIf при работе с группой форм использовать ngStyle или ngClass или [hidden] с привязкой свойства.

* Причина, по которой forControlName не работает с ngIf - ngIfполностью удаляет или добавляет блок из html, поэтому переменная не доступна вне ngIf.

Ниже приведен рабочий код с formControlName со скрытым атрибутом,

app. component.html

<button (click)="toggle()"> Toggle LastName of FormControl </button>

<div >
  <form [formGroup]="fieldFormGroup">
    <input type="text" formControlName="firstName" /> <br /><br />
  <input type="text" formControlName="lastName" [hidden]="showBlock" /> 
  </form>
</div>

<div>
   {{fieldFormGroup.value | json}}
</div>

или

<input type="text" formControlName="lastName" [style.display]="showBlock ? 'inherit' : 'none'" />

или

<style>
    .hide {
        display: none;
    }

    .show {
        display: block;
    }
</style>
<input type="text" formControlName="lastName" [ngClass]="showBlock ? 'show' : 'hide'" />

app.component.ts

import {Component} из "@ angular / core";

import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public showBlock: boolean = true;
  public fieldFormGroup: FormGroup;

  constructor(private fb: FormBuilder) {
    this.fieldFormGroup = this.fb.group({
      firstName: ["pravin"],
      lastName: ["patil"]
    });
  }

  public toggle() {
    this.showBlock = !this.showBlock;
  }
}

Answer 3

В случае, если вам нужно добавить formControl в fromGroup

Существует два способа:

this.searchForm=this.fb.group({
    client:this.client
})

Или вы можете добавить элемент управления в метод. Например:

searchTransaction(){ 
    this.searchForm.addControl('client',this.client);
    console.log(this.searchForm.value);
}

И лучше придерживаться тех же самых случаев (строчные | прописные | любые предпочтительные), которые не смущают вас, когда вы пишете длинный код

Answer 4

Пожалуйста, проверьте заглавные буквы в html Client против использования client