问题
I have a reuquirement in which i am using a multiselect dropdwon which also has logo for each row. On click of this logo i want to load other component, like we use viewchild in template driven approach is it possible to use it in Reactive formly form component?
Step 1: Open multiselect of formly element.
Step 2: There is a logo in each row, on click of logo a method is called and need to load calender component in popup.
Step 3 : Load contents of calendar-component.html in modal popup.
Stackblitz workaround of example for demonstration : Click here
Screenshot for logo in multiselect:
回答1:
you can create a function to verify if it model is selected:
isSelected() {
return this.model.hasOwnProperty('select') && this.model['select'].length;
}
and at your template you can call your calendar on that condition:
Entered Values
<div> {{model|json}}</div>
<calender *ngIf="isSelected()"></calender>
formly approach
as formly states you can also provide at your template as output modelChange
to trigger actions on model updates. this way your formy tag would look like:
<formly-form [model]="model" [fields]="fields"
(modelChange)="displayCalender()"
>
and you define displayCalender
funcionality at your component:
displayCalender() {
// logic to render your calender
}
https://stackblitz.com/edit/ngx-formly-ui-primeng-jxpyap?file=app/app.component.ts
来源:https://stackoverflow.com/questions/65363436/how-to-bind-a-component-on-click-of-element-in-multiselect-of-angular-formly-rea