Amplify-js: Unable to use <amplify-authenticator [signUpConfig]="signUpConfig" ></amplify-authenticator>

[DeniseJames]

I am using angular amplify-authentication. When I attempt to custom the signUpConfig the form does not change from the default. I wonder if I am not putting the following in auth.component.ts. What am I missing?

export class AuthComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}
const signUpConfig = {
header: 'Welcome!',
defaultCountryCode: '46',
hideDefaults: true,
signUpFields: [
{
label: 'Username',
key: 'username',
required: true,
displayOrder: 1,
type: 'string',
},
{
label: 'Password',
key: 'password',
required: true,
displayOrder: 2,
type: 'password',
},
{
label: 'Email',
key: 'email',
required: true,
displayOrder: 3,
type: 'email',
},
{
label: 'Name',
key: 'name',
required: true,
displayOrder: 4,
type: 'string',
},
{
label: 'Family name',
key: 'family_name',
required: true,
displayOrder: 5,
type: 'string',
},
{
label: 'Phone number',
key: 'phone_number',
required: false,
displayOrder: 6,
type: 'string',
}
]
};

Incognito

[gerrytsui]

You need to

1. change const to public ( or private)
2. and move the signUpConfig declaration inside the curly brackets of export class AuthComponent implements OnInit { }

ie same lever of constructor() and ngOnInit() functions.

[DeniseJames]

Thanks Gerry Tsui!

[lluis-stage]

Still not working for me. I have a public var in my component class but labels are always the default ones.