Currently, I am utilizing the ABP framework along with Angular UI to work on dynamic forms. One specific aspect of my work involves implementing a dropdown as shown below:

const timeZoneProp = new FormProp<IdentityUserDto>({
    type: ePropType.Enum,
    name: 'TimeZoneId',
    displayName: '::TimeZone',
    isExtra: true,
    id: 'TimeZoneId',
    autocomplete: 'off',
    validators: () => [Validators.required],
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {
      const service = data.getInjected(TimeZoneService);
      return service
        .getList()
        .pipe(
          map(
            response =>
              response.items?.map(
                item =>
                  ({ key: item.description, value: item.id } as Option<any>)
              ) || []
          )
        );
    }
  });

  propList.addByIndex(timeZoneProp, 6);

The dropdown functions properly, displaying the necessary data. However, I now have the requirement to auto-select a value upon the dropdown loading. The documentation mentions a defaultValue option for this purpose:

• defaultValue is the initial value the field will have. (default: null)

This defaultValue property can accept boolean, number, string, or Date values. Here is an example of how it is declared:

readonly defaultValue: boolean | number | string | Date;

I attempted setting the defaultValue using both index (defaultValue: 0) and key value (

defaultValue: '(UTC+00:00) Coordinated Universal Time ETC/GMT'

), but was unsuccessful in getting it to work. Consequently, I explored other methods, attempting to set it within the options definition like so:

const timeZoneProp = new FormProp<IdentityUserDto>({
  type: ePropType.Enum,
  name: 'TimeZoneId',
  displayName: '::TimeZone',
  isExtra: true,
  id: 'TimeZoneId',
  autocomplete: 'off',
  validators: () => [Validators.required],
  options: data => {
    const service = data.getInjected(TimeZoneService);
    return service.getList().pipe(
      map(response => {
        const options = response.items?.map(item => ({
          key: item.description,
          value: item.id
        })) || [];

        // Find the item where the key equals "(UTC+00:00) Coordinated Universal Time ETC/GMT"
        const defaultValueItem = options.find(
          item => item.key === '(UTC+00:00) Coordinated Universal Time ETC/GMT'
        );

        // If the defaultValueItem is found, assign its value to defaultValue
        if (defaultValueItem) {
          timeZoneProp.defaultValue = defaultValueItem.value;
        }

        return options;
      })
    );
  }
});

While attempting to set the defaultValue property inside the options definition, specifically at this line:

timeZoneProp.defaultValue = defaultValueItem.value;

I faced an issue due to the property being read-only, preventing me from overriding it within the options definition.

Is there a workaround to accomplish this requirement?

UPDATE

After further analysis, it seems that the default value may not be displayed because the options are loaded asynchronously, leading to the default value being set before the options are available. Could you suggest a workaround to address this challenge?

In an attempt to resolve this, I tried setting defaultValue as a promise:

const timeZoneProp = new FormProp<IdentityUserDto>({
    type: ePropType.Enum,
    name: 'TimeZoneId',
    displayName: '::TimeZone',
    isExtra: true,
    id: 'TimeZoneId',
    autocomplete: 'off',
    defaultValue: new Promise(resolve => {
      const data = {}; 
      const optionsPromise = this.options(data).toPromise();

      optionsPromise.then(options => {
        if (options.length > 0) {
          resolve(options[0].value);
        } else {
          resolve(null); // Set default value to null if options array is empty
        }
      });
    }).then(
      resolvedValue =>
        resolvedValue as string | number | boolean | Date | undefined
    ), // Cast the resolved value to the appropriate type
    validators: () => [Validators.required],
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {
      const service = data.getInjected(TimeZoneService);
      return service
        .getList()
        .pipe(
          map(
            response =>
              response.items?.map(
                item =>
                  ({ key: item.description, value: item.id } as Option<any>)
              ) || []
          )
        );
    }
  });

Unfortunately, this resulted in an error related to the defaultValue property:

Type 'Promise<string | number | boolean | Date | undefined>' is not assignable to type 'string | number | boolean | Date | undefined'.ts(2322) form-props.d.ts(36, 14): The expected type comes from property 'defaultValue' which is declared here on type '{ validators?: PropCallback<IdentityUserDto, ValidatorFn[]> | undefined; asyncValidators?: PropCallback<IdentityUserDto, AsyncValidatorFn[]> | undefined; ... 15 more ...; name: string; }' (property) defaultValue?: string | number | boolean | Date | undefined

 const optionsPromise = this.options(data).toPromise();

which threw:

this' implicitly has type 'any' because it does not have a type annotation.