How to add roles for user while user registration form angular

I’m working on a Spring Boot based web application in Java. I’m trying to create admin/user registration for my application. To be honest this is my first application and I don’t really know how to add user roles while registration in front end whereas I did it in back end role added without problem. I’ve searched about this issue, but no one helps me how to add roles.

In my database it added like user how ever the input are.

If someone tell me you should add the roles in constructor’s user, the role in user is Set while input value is Set String> it should convert it first to a Set and add it to user.setRole(x) then I can use it but how can I use it in front end? that’s my problem.

And Thank you in advance to any one who may be able to give me some ideas.

User.Controller

@PostMapping("/signup")
    public ResponseEntity<?> registerUser(@Valid @RequestBody RegistrationForm signUpRequest) {
       if (utilisateurRepository.existsByUsername(signUpRequest.getUsername())) {
            return ResponseEntity
                    .badRequest()
                    .body(new MessageResponse("Error: Username is already taken!"));
        }

        if (utilisateurRepository.existsByEmail(signUpRequest.getEmail())) {
            return ResponseEntity
                    .badRequest()
                    .body(new MessageResponse("Error: Email is already in use!"));
        }


        // Create new user's account
        Utilisateur user = new Utilisateur(signUpRequest.getUsername(),
                signUpRequest.getEmail(),
                passwordEncoder.encode(signUpRequest.getPassword()), signUpRequest.getTelephone());

        Set<String> strRoles = signUpRequest.getRoles();
        Set<Role> roles = new HashSet<>();


        if (strRoles == null) {
            Role userRole = roleRepository.findByName(ERole.ROLE_USER)
                    .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
            roles.add(userRole);

        } else {
            strRoles.forEach(role -> {
                switch (role) {
                    case "admin":
                        Role adminRole = roleRepository.findByName(ERole.ROLE_ADMIN)
                                .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
                        roles.add(adminRole);

                        break;


                    default:
                        Role aideRole = roleRepository.findByName(ERole.ROLE_AIDESOIGNANTE )
                                .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
                        roles.add(aideRole);
                }
            });
        }

User.Model

Document(collection =  "Utilisateur")
public class Utilisateur {

    @Id
    private String id_user;
    @NotBlank
    @Size(max = 20)
    private String username;

    @NotBlank
    private String password;
    @NotBlank
    @Size(max = 20)
    private String Nom;

    @NotBlank
    @Size(max = 50)
    @Email
    private String email;
    @NotBlank
    private int telephone;


    public Utilisateur(String username, String email, String password, int telephone) {
        this.username = username;
        this.email = email;
        this.telephone = telephone;
        this.password = password;
    }

    @DBRef
    private Set<Role> roles = new HashSet<>();


}

Auth.Service => Angular

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  role : any [];

  constructor(private http: HttpClient) { }

  register(user): Observable<any> {
    return this.http.post(AUTH_API + 'signup', {
      username: user.username,
      email: user.email,
      telephone: user.telephone,
      role: user.role,
      password: user.password
    }, httpOptions);