Username input couldn't set default value with Angular Amplify UI

[gongte1937]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator

How is your app built?

Angular

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html

Please describe your bug.

Angular Amplify UI doesn't have the default value set in form-field.component component, so I could't set default value for username with formField. see examples here

The updates should be something like:

  <amplify-text-field
    *ngIf="!isPasswordField() && !isPhoneField()"
    [name]="name"
    [label]="formField.label"
    [placeholder]="formField.placeholder"
    [initialValue]="formField.value"
    [required]="formField.isRequired"
    [labelHidden]="formField.labelHidden"
    [autocomplete]="formField.autocomplete"
    [type]="formField.type"
    [hasError]="hasError"
    [describedBy]="ariaDescribedBy"
  ></amplify-text-field>

and FormFieldOptions also need to be updated:

export interface FormFieldOptions {
  /** Will hide the label above the input if set to true */
  labelHidden?: boolean;
  /** Label text */
  label?: string;
  /** Placeholder text */
  placeholder?: string;
  /**
   * @deprecated For internal use only, please use `isRequired` instead.
   */
  required?: boolean;
  /** Whether this field is required for submission */
  isRequired?: boolean;
  /** Default value for the input */
  value?: string;
  /** Default dial code value */
  dialCode?: string;
  /** TOTP issuer to be used in the QR setup */
  totpIssuer?: string;
  /** TOTP username to be used in the QR */
  totpUsername?: string;
  /** List of dial codes you want to show in phone number field */
  dialCodeList?: Array<string>;
  /** Integer that denotes where this field should be positioned in. */
  order?: number;
  /** Desired HTML input type */
  type?: string;
  /** Desired autocomplete HTML attribute */
  autocomplete?: string;
  /** Whether the first character is auto-capitalized */
  autocapitalize?: string;
}

What's the expected behaviour?

The same behaviour that has been implemented with react amplify UI: example

Help us reproduce the bug!

See here

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[jacoblogan]

Thank you for bringing this issue to our attention, adding this to our feature roadmap.