"Field" is deprecated, use "optionLabel" instead

primefaces · Nov 16, 2023 · 4c57057 · 4c57057
1 parent 44f2601
commit 4c57057
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/src/app/showcase/doc/autocomplete/dropdowndoc.ts
@@ -18,7 +18,7 @@ interface AutoCompleteCompleteEvent {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-dropdown-demo"></app-code>
     </section>`
@@ -60,11 +60,11 @@ export class DropdownDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
@@ -14,7 +14,7 @@ interface AutoCompleteCompleteEvent {
             <p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-force-selection-demo"></app-code>
     </section>`
@@ -54,11 +54,11 @@ export class ForceSelectionDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/src/app/showcase/doc/autocomplete/objectsdoc.ts
@@ -12,12 +12,12 @@ interface AutoCompleteCompleteEvent {
     template: ` <section class="py-4">
         <app-docsectiontext [title]="title" [id]="id">
             <p>
-                AutoComplete can also work with objects using the <i>field</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
-                Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
+                AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
+                a Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-objects-demo"></app-code>
     </section>`
@@ -57,11 +57,11 @@ export class ObjectsDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
@@ -16,7 +16,7 @@ interface AutoCompleteCompleteEvent {
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup">
-                <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+                <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
             </form>
         </div>
         <app-code [code]="code" selector="autocomplete-reactive-forms-demo"></app-code>
@@ -62,13 +62,13 @@ export class ReactiveFormsDoc implements OnInit {
     code: Code = {
         basic: `
 <form [formGroup]="formGroup">
-    <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </form>`,
 
         html: `
 <div class="card flex justify-content-center">
     <form [formGroup]="formGroup">
-        <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+        <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
     </form>
 </div>`,
 

diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts
@@ -15,7 +15,7 @@ interface AutoCompleteCompleteEvent {
             <p><i>item</i> template allows displaying custom content inside the suggestions panel. The local ng-template variable passed to the ng-template is an object in the suggestions array.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+            <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
                 <ng-template let-country pTemplate="item">
                     <div class="flex align-items-center gap-2">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
@@ -62,7 +62,7 @@ export class TemplateDoc {
     code: Code = {
         basic: `
 <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" 
-    (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+    (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">
                 <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>
@@ -73,7 +73,7 @@ export class TemplateDoc {
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+    <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">
                 <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>

diff --git a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
@@ -16,7 +16,7 @@ interface AutoCompleteCompleteEvent {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-virtual-scroll-demo"></app-code>
     </section>`
@@ -56,11 +56,11 @@ export class VirtualScrollDoc {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>
 </div>`,
 
         typescript: `