从 onDeactivate 访问 p-inplace 内容值

Question

I'm working with p-inplace of primeNg. I want to call a function when onDeactivate is called, using the value of pTemplate content.

code snippet:

<p-inplace [closable]="true" (onDeactivate)="doSomething(???)">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData">
   </ng-template>
</p-inpace>

I want to send the value typed into myInput where the??? are. If it were not in the template, I could send by doSomething(myInput.value) , but since it is within a template, it is not recognized there.

Does anyone have a solution or a workaround for this?

Answer 1

Unfortunately you can not use template-variable-reference as you already know.

I solution to your problem would be to save the changes in an other variable in your template so you can use it when you need it and leave the parameter in your template function doSomething() empty.

<p-inplace [closable]="true" (onDeactivate)="doSomething()">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData" (ngModelChange)="someData = $event">
   </ng-template>
</p-inpace> 

And inside your ts file:

someData: string;

doSomething() {
  /* now your value is inside this.someData /*
}

PS: I guess that you don't want to use 2 way binding, If you don't mind, you do not need to create a second variable. You can just:

[(ngModel)]="someData" 

Answer 2

I addition to StPaulis's answer, don't forget to add name attribute, if ngModel is used within a form tag. So the input will look like this:

 <input type="text" pInputText [(ngModel)]="someData" name="someData">