Ошибки, пытающиеся создать компонент многоразовой формы в Angular

Я использую Angular Material Select, и он работает хорошо:

<div [formGroup]="dwellingValues">
<mat-form-field appearance="outline" hideRequiredMarker>
  <mat-label>Dwelling Type</mat-label>
  <mat-select formControlName="typeofDwelling">
    <mat-option>Please Select</mat-option>
    <mat-option *ngFor="let dwellingType of dwellingOptions.dwellingTypes" [value]="dwellingType">
      {{dwellingType}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>

Поскольку у меня их много, я пытаюсь создать повторно используемый компонент.

Я создал следующее:

export class MySelectComponent {
  @Input() formControl: string;
  @Input() label: string;
  @Input() value: string;
  @Input() placeholder: string;
  @Input() items: string[];

  constructor() { }

}

Со следующим html

<mat-form-field appearance="outline" hideRequiredMarker>
  <mat-label>{{label}}</mat-label>
  <mat-select placeholder=placeholder formControlName=formControl>
    <mat-option>Please Select</mat-option>
    <mat-option *ngFor="let item of items" [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

И я называю это так:

<div [formGroup]="dwellingValues">
    <app-my-select [label]="'Dwelling Type'"  [formControl]="'typeofDwelling'" [items]="dwellingOptions.dwellingTypes" ></app-my-select>         
</div>

Я получаю следующие ошибки:

No value accessor for form control with unspecified name attribute
formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

Всего 1 ответ


Вы передаете FormControlName в качестве входных данных, а не formControl. Вам нужно получить formControl и передать его в качестве ввода.

parent html as

<div [formGroup]="dwellingValues">
 <app-my-select 
  [label]="'Dwelling Type'" 
  [selectFormControl]="typeofDwelling" 
  [items]="dwellingOptions.dwellingTypes">
 </app-my-select>
</div>

Лучшая практика - использовать getter для formControl. parent html as

<div [formGroup]="dwellingValues">
 <app-my-select [label]="'Dwelling Type'" [formControl]="typeofDwelling" [items]="dwellingOptions.dwellingTypes" ></app-my-select>         
</div>

и в родительском контроллере.ts

public get typeofDwelling(): FormControl {
return this.dwellingValues.get('typeofDwelling') as FormControl;
}

и изменить formControl input type как FormControl

export class MySelectComponent {
 @Input() selectFormControl: FormControl;
 @Input() label: string;
 @Input() items: string[];

 constructor() { }

}

и child html as

 <mat-form-field appearance="outline" hideRequiredMarker>
  <mat-label>{{label}}</mat-label>
  <mat-select [formControl]="selectFormControl">
    <mat-option>Please Select</mat-option>
    <mat-option *ngFor="let item of items" [value]="item">
        {{item}}
    </mat-option>
  </mat-select>
 </mat-form-field>

вот демонстрация этого slackblitz


Есть идеи?

10000