Не удается найти элемент управления с неопределенным атрибутом имени

Question

Мой фильтр работает со странным поведением ... Я проверил свою консоль и получил ошибку: Не удается найти элемент управления с неопределенным атрибутом имени ... Я уже искал ошибку в inte rnet и нашел некоторые решения, но моя ошибка не была устранена.

Мой код немного длиннее, и я уменьшил его.

HTML

<mat-form-field class="mr-24" fxFlex="45%">
    <input type="text" formControlName="customerName" [(ngModel)]="customerName" 
         matInput [formControl]="customerControl" [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let optionCustomer of filteredOptions | async" [value]="option">
            {{optionCustomer}}
        </mat-option>
    </mat-autocomplete>
 </mat-form-field>

TYPESCRIPT

export class TimesheetManagementComponent implements OnInit {
  customerName: any;
  formFilter: FormGroup; 
  constructor(private formBuilder: FormBuilder){

      this.formFilter = formBuilder.group({
      customerName: this.customerName,
      });
   }
}

Answer 1

Изменить код из конструктора на ngOnInit ()

Answer 2

просто добавьте имя атрибута во входной тег:

<input type="text" formControlName="customerName" [(ngModel)]="customerName" matInput [formControl]="customerControl" [matAutocomplete]="auto" name="something">

И использование ngModel + реактивная форма устарела google:)

РЕДАКТИРОВАТЬ:

HTML

<mat-form-field class="mr-24" [formGroup]="formFilter" fxFlex="45%">
<input type="text" formControlName="customerName" (change)="test($event)"
     matInput [matAutocomplete]="auto" name="customerName">
                <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let optionCustomer of filteredOptions | 
                         async" [value]="option">
        {{optionCustomer}}
    </mat-option>
</mat-autocomplete>
 </mat-form-field>

TYPESCRIPT

class TimesheetManagementComponent implements OnInit {
    customerName: any;
    formFilter: FormGroup; 
    constructor(private formBuilder: FormBuilder){
        this.formFilter = formBuilder.group({
            customerName: this.customerName,
        });
    }
    ngOnInit():void {}
    test($event):void {
        console.log($event);
    }
}

Что-то подобное должно работать, я не знаю, есть ли у вас уже используйте FormGroup прежде в вашем коде.

Добро пожаловать