admin管理员组

文章数量:1122832

I'm using Formly Autocomplete in an Angular v18 project and I'm not sure how to add a displayWith property that will take some function coupled with my Formly Autocomplete field to uniquely display the properties present in the objects I am showing in my Formly field.

autocomplete-typeponent.ts

@Component({
  selector: 'formly-autocomplete-type',
  template: `
    <input
      matInput
      [matAutocomplete]="auto"
      [formControl]="formControl"
      [formlyAttributes]="field"
      [errorStateMatcher]="errorStateMatcher"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [autoActiveFirstOption]="true"
      [autoSelectActiveOption]="true"
    >
      <mat-option *ngFor="let value of filter | async" [value]="value">
        {{ value }}
      </mat-option>
    </mat-autocomplete>
  `,
})
export class AutocompleteTypeComponent
  extends FieldType<FieldTypeConfig>
  implements OnInit {}

example of a field

{
      key: 'workCenterCode',
      type: 'autocomplete',
      props: {
        required: true,
        label: 'Work Center Code',
        placeholder: 'Work Center Code',
        filter: (term: string) =>
          of(
            term
              ? this.workOrderInputsService.filterObjectArray(
                  term,
                  this.workCenterCodeArray,
                  'NAME'
                )
              : this.workCenterCodeArray.slice()
          ),
      },
    },

I know that I can edit the autocomplete component in my project, but I'm not quite sure how to take the last step of providing a flexible value for displayWith.

I'm using Formly Autocomplete in an Angular v18 project and I'm not sure how to add a displayWith property that will take some function coupled with my Formly Autocomplete field to uniquely display the properties present in the objects I am showing in my Formly field.

autocomplete-type.component.ts

@Component({
  selector: 'formly-autocomplete-type',
  template: `
    <input
      matInput
      [matAutocomplete]="auto"
      [formControl]="formControl"
      [formlyAttributes]="field"
      [errorStateMatcher]="errorStateMatcher"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [autoActiveFirstOption]="true"
      [autoSelectActiveOption]="true"
    >
      <mat-option *ngFor="let value of filter | async" [value]="value">
        {{ value }}
      </mat-option>
    </mat-autocomplete>
  `,
})
export class AutocompleteTypeComponent
  extends FieldType<FieldTypeConfig>
  implements OnInit {}

example of a field

{
      key: 'workCenterCode',
      type: 'autocomplete',
      props: {
        required: true,
        label: 'Work Center Code',
        placeholder: 'Work Center Code',
        filter: (term: string) =>
          of(
            term
              ? this.workOrderInputsService.filterObjectArray(
                  term,
                  this.workCenterCodeArray,
                  'NAME'
                )
              : this.workCenterCodeArray.slice()
          ),
      },
    },

I know that I can edit the autocomplete component in my project, but I'm not quite sure how to take the last step of providing a flexible value for displayWith.

  • angular
  • angular-formly
Share Improve this question edited Nov 23, 2024 at 5:25 Steve G 13.3k7 gold badges43 silver badges59 bronze badges asked Nov 22, 2024 at 19:52 KafrizzKafrizz 211 bronze badge
Add a comment  | 

1 Answer 1

Reset to default 0

Rather than using Material Autocomplete's displayWith property, access the displayProp property from the props of your Formly field.

template: `
    <input
      matInput
      [matAutocomplete]="auto"
      [formControl]="formControl"
      [formlyAttributes]="field"
      [errorStateMatcher]="errorStateMatcher"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [autoActiveFirstOption]="true"
      [autoSelectActiveOption]="true"
    >
      <mat-option *ngFor="let value of filter | async" [value]="value">
        {{ value[props['displayProp']] }}
      </mat-option>
    </mat-autocomplete>
  `,

{
      key: 'workCenterCode',
      type: 'autocomplete',
      props: {
        required: true,
        label: 'Work Center Code',
        placeholder: 'Work Center Code',
        displayProp: 'NAME',
        filter: (term: string) =>
          of(
            term
              ? this.workOrderInputsService.filterObjectArray(
                  term,
                  this.workCenterCodeArray,
                  'NAME'
                )
              : this.workCenterCodeArray.slice()
          ),
      },
    },

本文标签： angularSituation Dependent displaywith Property with Formly AutocompleteStack Overflow

版权声明：本文标题：angular - Situation Dependent displaywith Property with Formly Autocomplete - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736301136a1931073.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。