How to add new fields to sap e-commerce cloud login interface

Time:2022-5-5

Component selector in login interface:cx-update-profile

How to add new fields to sap e-commerce cloud login interface

Find the corresponding component name:UpdateProfileComponent

How to add new fields to sap e-commerce cloud login interface

Component has only one formgroup instance.

How to add new fields to sap e-commerce cloud login interface

When is the value assigned to the form of the service? Copy in the service class. Instead of using the form builder, create the formgroup instance manually. ShouldFormGroupConstructor, the received parameters are JSON objects, the key is the name of the control bound to HTML, and the value is the initial value of these controls.
How to add new fields to sap e-commerce cloud login interface

This form group passedpatchValueAssignment:

How to add new fields to sap e-commerce cloud login interface

Test URL:

http://localhost:4299/electro…

How to add new fields to sap e-commerce cloud login interface

adoptformControlNameThe instruction binds the input element in HTML to the formcontrol instance in component.

How to add new fields to sap e-commerce cloud login interface

How to add new fields to sap e-commerce cloud login interface

There is another one in this server classisUsage:

 protected user$ = this.userProfile
    .get()
    .pipe(filter((user): user is User => Boolean(user)));

How to add new fields to sap e-commerce cloud login interface

thereisIt’s atype guardFunction, refer to thislink

Take the following example:

function isString(test: any): test is string{
    return typeof test === "string";
}

function example(foo: any){
    if(isString(foo)){
        console.log("it is a string" + foo);
        console.log(foo.length); // string function
    }
}
example("hello world");

If the function returns true after isstring is called, it proves the input parametertestIt is indeed a string type. At this time, the typescript compiler will consider it to beisStringIn the protected if code block, variablesfooThe type of must bestringTherefore, foo can be used directly Length accesses the length attribute of this string variable.

How to add new fields to sap e-commerce cloud login interface

SetValue and patchvalue are methods from angular formgroup. They all set the value of the control in the form group. The obvious difference is that setValue cannotexcludeDrop some controls, and patchvalue can do this.

So suppose we have a form group with two controls: name and age.

If we want to set the value of one control, it won’t work, so we must set the value of two controls:

formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});

If a formgroup contains a considerable number of form control instances, usesetValueYou need to enumerate all the values of these instances assetValueInput parameters for.