Используйте пользовательский компонент для изменения значения formControl

Question

Я создаю реактивную форму в своем приложении angular. У меня есть небольшой компонент многократного использования, который я построил, и я хотел бы использовать этот компонент для изменения значения одного из formControls в моей группе formGroup. Однако я не могу понять, как это правильно подключено.

Простое использование formControlName, как вы делаете с matInput или mat-slide-toggle, похоже, не работает так же.

Мой повторно используемый компонент использует входные данные внутри себя, есть ли в любом случае, я могу связать это с formControl в моей группе?

Использование повторно используемого компонента

<app-tenant-picker 
    (selectedTenant)="changeSelectedTenant($event)"
    formControlName="tenant">
</app-tenant-picker>

Повторно используемый компонент html

<mat-form-field class="full-width">
        <mat-label>{{ label }}</mat-label>
        <mat-icon class="search-icon" matSuffix>keyboard_arrow_down</mat-icon>
        <input type="text" matInput [formControl]="tenantListFormControl" [matAutocomplete]="auto"
               autocomplete="off">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
                          [displayWith]="displayTenantNameInAutocomplete"
                                              (optionSelected)="emitTenant($event)">
            <mat-option *ngFor="let tenant of filteredTenantList$ | async" [value]="tenant">
                {{tenant.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

(selectedTenant) представляет собой простой EventEmitter: @Output() selectedTenant = new EventEmitter<Tenant>();

FormGroup

this.form = this._formBuilder.group({
        name: new FormControl('', [Validators.required]),
        comment: new FormControl(''),
        tenant: new FormControl('', [Validators.required]),
        sources: new FormArray([]),
        include: this.includeLocation,
        location: new FormControl('', [Validators.required]),
        locationComment: new FormControl('')
      });

Other

selectedTenant: Tenant;
...
changeSelectedTenant(tenant: Tenant) {
    this.selectedTenant = tenant;
    console.log("ST: ",this.selectedTenant);
  }

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

Answer 1

Вам необходимо внедрить ControlValueAccessor в свой пользовательский компонент

Подробнее об этом здесь и здесь