У меня проблемы с Reactive Forms и созданием пользовательского компонента выбора.
Мне нужно создать некоторый пользовательский компонент выбора.
Я рассмотрел несколько ответов по Stackoverflow, которые включают в себя реализацию реализации ControlValueAccessor.Они выглядят так, как будто они работают, но они очень тяжелы для того, что мне нужно.
Я также поиграл с расширением «SelectControlValueAccessor», но кажется, что это не очень распространенная вещь.Если это не распространено, я спрашиваю, является ли это правильным подходом к моей проблеме.
По сути, мне нужен пользовательский компонент выбора, который автоматически выполняет вызов службы и работает с реактивными формами.
Это похоже на то, что я собираюсь сделать:
@Component({
selector: 'customer-select',
styleUrls: ['./customer-select.component.css'],
templateUrl: './customer-select.component.html'
})
export class CustomerSelectComponent extends SelectControlValueAccess implements OnInit {
customers: ICustomer[];
constructor(
private render: Renderer2,
private elementRef: ElementRef,
private customerService: CustomerService,
) {
super(render, elementRef);
}
ngOnInit(): void {
this.customerService.getCustomers()
.subscribe((response: IApiResponse<ICustomer[]>) => {
this.customers = response.Data;
this.customers.sort(this.getFuncToSortMostUsedToDefaultOrdering());
// additional logic goes here
},
(err: any) => console.log(err),
() => console.log('getCustomers() retrieved workflows')
);
}
private getCompareToStrings(firstEl: string, secondEl: string) {
if (firstEl < secondEl) {
return -1;
}
if (firstEl > secondEl) {
return 1;
}
return 0;
}
private getFuncToSortMostUsedToDefaultOrdering() {
// Assuming that we have two customers.
return (firstElement: ICustomer, secondElement: ICustomer) => {
return SomeLogicHere.Compare(firstElement, secondElement)
}
}
Вот код HTML:
<!-- Need the formControlName somehow passed in --->
<select id="customer" class="form-control" formControlName="customer">
<option *ngFor="let customer of customers" [ngValue]="customer">
{{customer.CustomerNumber}}
</option>
</select>
Не стесняйтесь упоминать какие-либо подробности, которые я мог бы пропустить,Или, может быть, вопросы или обсуждения дизайна, которые я пропустил.
Может быть, я мог бы использовать композицию поверх наследования и создать «SelectControlValueAccess», продолжая при этом реализовывать «ControlValueAccessor»?
Какие-нибудь тривиальные решения, в которых не используется слишком много платок?Просто кажется, что остальные решения настолько сложны для такой тривиальной вещи.
РЕДАКТИРОВАТЬ: причина, по которой я это делаю, заключается в том, что этот 'customer-select' будет использоваться во многих местах приложения.
Кроме того, мне придется сделать это для5 других вариантов выбора, поэтому я не люблю так много кода для чего-то такого тривиального.
РЕДАКТИРОВАТЬ:
Я думаю, что этот код работает, если у кого-то есть какие-либо входы по этому коду, возможно, что-то я пропустил, то, пожалуйста, поделитесь: NEVERMIND BROKEN
@Component({
selector: 'customer-select',
templateUrl: './customer-select.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomerSelectComponent),
multi: true
}
]
})
export class CustomerSelectComponent extends SelectControlValueAccessor implements OnInit {
customers: ICustomer[];
constructor(
private render: Renderer2,
private elementRef: ElementRef,
private dataService: DataService,
private fb: FormBuilder
) {
super(render, elementRef);
}
ngOnInit(): void {
this.dataService.getCustomers()
.subscribe((response: IApiResponse<ICustomer[]>) => {
this.customers = response.Data;
// Additional Logic
},
(err: any) => console.log(err),
() => console.log('getCustomers() retrieved workflows')
);
}
}
HTML:
<select id="customer" class="form-control">
<option *ngFor="let customer of customers" [ngValue]="customer">
{{customer.CustomerNumber}}
</option>
</select>