Amplify-js: amplify-ui-components @aws-amplify/ui-vue Signup formFields not respected

[valtrem]

* Which Category is your question related to? *
amplify-ui-components

* What AWS Services are you utilizing? *
DataStore, Cognito, S3,

* Provide additional details e.g. code snippets *

"dependencies": {
"@aws-amplify/core": "^3.2.1",
"@aws-amplify/datastore": "^2.0.5",
"@aws-amplify/ui-vue": "^0.2.2"
}

<template>
  <div>
    <amplify-authenticator username-alias="email">
      <amplify-sign-in
        :username-alias="signInConfig.usernameAlias"
        slot="sign-in"
      />
      <amplify-sign-up
        :header-text="signUpConfig.headerText"
        :username-alias="signUpConfig.usernameAlias"
        :form-fields="signUpConfig.formFields"
        slot="sign-up"
      />
    </amplify-authenticator>
  </div>
</template>

md5-0f3215d7bb2aae766d0b3d866690b630





md5-da164e17ccbd479ae752f16ea696abe7



<style lang="scss">
:root {
  --amplify-primary-color: var(--v-primary-base);
}
</style>

Expected behaviour :
With the provided example above, I would expect the Email field label to read 'Email' and wouldn't expect the phone field to be present at all.

What is the proper way to use formFields with amplify-ui-components for Vue ?

[ashika01]

@valtrem - I guess you issue is related to this https://github.com/aws-amplify/amplify-js/issues/5298. We are investigating to enable this function.

[valtrem]

Hi @ashika01,
Yes, It's probably related.

Please note I can't get this to work even if I remove username-alias prop.

The formFields simply don't seem to be taken into account at all.

[ashika01]

@valtrem yeah we are aware of this. we configured our UI to spin up formfields based on usernameAlias which is defaulted to username. we are revamping that to check for the required login fields and then to allow other fields to be customizable.

[ashika01]

I am going to close this ticket and track this with #5298. Please feel free to comment on that issue for more info.

[albertbenitez]

Is this fixed in PD? I'm having the same issue with Vue still.

[ashika01]

@albertbenitez it should work in unstable. we will be doing release soon and update in the issue tracked.

[albertbenitez]

@ashika01 maybe @valtrem can verify but I've tried with:
Dependencies": @aws-amplify/ui-vue": "^0.2.3-unstable.35"
And it still doesn't work, but I can wait for the stable version to try again.

Tried with:

<template>
        <amplify-authenticator :federated="signUnConfig.federatedConfig">
            <amplify-sign-up
                :header-text="signUpConfig.headerText"
                :form-fields="signUpConfig.formFields"
                :submit-button-text="signUpConfig.submitButtonText"
                :username-alias="signUpConfig.usernameAlias"
                slot="sign-up"
            ></amplify-sign-up>
        </amplify-authenticator>
</template>

export default {
    data() {
        return {
            signUpConfig: {
                headerText: 'Test',     //working
                usernameAlias: 'email',   //working
                submitButtonText: 'test button',   //working
                formFields: [   // NOT working
                    { type: 'username', label: 'Email Label', required: true },
                    { type: 'password', label: 'Pass Label Text', placeholder: 'placetext', required: true },
                ],
                federatedConfig: { provider: 'Facebook' },
            },
        };
    },
}

[ashika01]

@albertbenitez I got this issue too. Looks like its the flow between stencil and vue. Could you try this? I guess it should solve your problem.

<amplify-sign-up
                :form-fields.prop="signUpConfig.formFields"
                slot="sign-up"
            ></amplify-sign-up>

Make the change in your template from :form-fields to :form-fields.prop. Let me know if that solves it.

[albertbenitez]

Yes, that solved the issue! Thank you