export class RegisterComponent implements OnInit {
  //@Output() cancelRegister = new EventEmitter();
  registerForm: FormGroup = new FormGroup({});
  complexPassword = "(?=^.{8,20}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?!.*\s).*$";
  errors: string[] | null = null;
  email: string;
  
  genders = [
    {value:GenderEnum.None, text:'Prefer not to say'},
    {value:GenderEnum.Male, text:'Male'},
    {value:GenderEnum.Female, text:'Female'},
    {value:GenderEnum.Other, text:'Others'}
];
  constructor(private fb: FormBuilder, private accountService: AccountService, private router: Router) {}
  ngOnInit(): void {
    this.initializeForm();
  }
  initializeForm() {
    this.registerForm = this.fb.group({
    displayName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
    email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.email],
      [this.validateEmailNotTaken()]],
    firstName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
    lastName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
    password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(20),
      Validators.pattern(this.complexPassword)]],
    dateOfBirth: [null],
    gender: [null],
    street: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
    postalCode: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20)]],
    city: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
    confirmPassword: ['', [Validators.required, this.matchValues('password')]],
    });
    
    this.registerForm.controls['password'].valueChanges.subscribe({
    next: () => this.registerForm.controls['confirmPassword'].updateValueAndValidity()
    })
  }  
  matchValues(matchTo: string): ValidatorFn {
    return (control: AbstractControl) => {
      return control.value === control.parent?.get(matchTo)?.value ? null : {notMatching: true}
    }
  }
   passwordMatchValidator(group: AbstractControl) {
    return group.get('password').value === group.get('confirmPassword').value
      ? null : { mismatch: true };
  }
  onSubmit() {
    if (!this.registerForm.valid)
      return;
  
    this.accountService.register(this.registerForm.value).subscribe({
      next: (response:any) => {
        if (response.error)
        {
          this.errors = response.error;
        }
        else
          this.router.navigateByUrl('/shop');
      },
      error: error => 
      {
        this.errors = error.errors
      }
    });
  }
  validateEmailNotTaken(): AsyncValidatorFn {
    return (control: AbstractControl) => {
      return control.valueChanges.pipe(
        debounceTime(1000),
        take(1),
        switchMap(() => {
          this.email = control.value;
          return this.accountService.checkEmailExists(this.email).pipe(
            map(result => result ? {emailExists: true} : null),
            finalize(() => control.markAsTouched())
          )
        })
      )
    }
  }
  cancel() {
    //this.cancelRegister.emit(false);
    this.router.navigateByUrl('/shop')
  }
  private getDateOnly(dob: string | undefined) {
    if (!dob) return;
    let theDob = new Date(dob);
    return new Date(theDob.setMinutes(theDob.getMinutes()-theDob.getTimezoneOffset()))
      .toISOString().slice(0,10);
  }
}

<div class="d-flex justify-content-center mt-5">
    <div class="col-3">
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="text-center mb-4">
                <h1 class="mb-3">Sign up</h1>
            </div>
            <div class="mb-3">
                <label style="margin-right: 10px; margin-bottom: 10px;">Gender (optional): 
                </label><br>
                <label *ngFor="let gender of genders" >
                    <ul>
                       <input type="radio" [value]="gender.value" formControlName="gender"> 
                            {{gender.text}}
                   </ul>
                 </label>               
            </div>
            <app-text-input [formControl]="$any(registerForm.controls['displayName'])"
                [label]="'Display Name'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['email'])" [label]="'Email'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['password'])" [label]="'Password'"
                [type]="'password'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['confirmPassword'])" [label]="'Confirm Password'"
                [type]="'password'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['firstName'])"
                [label]="'First Name'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['lastName'])"
                [label]="'Last Name'"></app-text-input>
            <app-date-picker [formControl]="$any(registerForm.controls['dateOfBirth'])"
                [label]="'Date of Birth'"></app-date-picker>
            <app-text-input [formControl]="$any(registerForm.controls['street'])" [label]="'Street'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['postalCode'])"
                [label]="'Postal Code'"></app-text-input>
            <app-text-input [formControl]="$any(registerForm.controls['city'])" [label]="'City'"></app-text-input>
            <ul class="text-danger list-unstyled" *ngIf="errors">
                <li *ngFor="let error of errors">
                    {{error}}
                </li>
            </ul>
            <div class="text-center">
                <button [disabled]="registerForm.invalid" class="btn btn-lg btn-primary my-3 me-4 col-5"
                    type="submit">Sign up</button>
                <button class="btn btn-lg btn-light my-3 col-5" type="button" (click)="cancel()">Cancel</button>
            </div>
        </form>
    </div>
</div>

export class AccountService {
  baseUrl = environment.apiUrl;
  private currentUserSource = new ReplaySubject<User | null>(1);
  currentUser$ = this.currentUserSource.asObservable();
  errorsAccount: string[] | null = null;
  constructor(private http: HttpClient, private router: Router) { }
  loadCurrentUser(token: string | null) {
    if (token === null) {
      this.currentUserSource.next(null);
      return of(null);
    }
    let headers = new HttpHeaders();
    headers = headers.set('Authorization', `Bearer ${token}`);
    return this.http.get<User>(this.baseUrl + 'account', {headers}).pipe(
      map((user: any) => {
        if (user) {
          localStorage.setItem('token', user.data.token);
          this.currentUserSource.next(user.data);
          return user;
        } else {
          return null;
        }
      })
    );
  }
  login(values: any) {
    return this.http.post<User>(this.baseUrl + 'account/login', values).pipe(
      map((user: any) => {
        localStorage.setItem('token', user.data.token);
        this.currentUserSource.next(user.data);
      })
    )
  }
  register(values: any) {
    return this.http.post<User>(this.baseUrl + 'account/register', values).pipe(
      tap((res:any) => {
        if (!res.error)
        {
          localStorage.setItem('token', res.data.token);
          this.currentUserSource.next(res.data);
        }
      })
    )
  }
  logout() {
    localStorage.removeItem('token');
    this.currentUserSource.next(null);
    this.router.navigateByUrl('/');
  }
  checkEmailExists(email: string) {
    return this.http.get<boolean>(this.baseUrl + 'account/emailExists?EmailToCheck=' + email);
  }
}

{
"data":
{
"displayName":"Thomas",
"dateOfBirth":null,
"gender":null,
"email":"tom@test2.com",
"token":"someTokenGenerated"
},
"error":null
}

genders = [
{value:GenderEnum.None,text:''},
{value:GenderEnum.Male,text:'Male},
{value:GenderEnum.Female,text:'Female'},
{value:GenderEnum.Other,text:'Others'}
]

<label .. *ngFor="let gender of genders" >
<ul>
<input type="radio" [ngValue]="gender.value" formControlName="gender"> 
{{gender.text}}
</ul>
</label>  

genders=Object.keys(GenderEnum).filter((x:any)=>isNaN(x))
<label .. *ngFor="let gender of genders;let i=index" >
<ul>
<input type="radio" [ngValue]="i" formControlName="gender"> 
{{gender}}
</ul>
</label>  

onSubmit() {
//check if is valid before send
if (!this.registerForm.valid)
return;
this.accountService.register(this.registerForm.value).subscribe({
next: (response:any) => {
if (response.error)
{
//do something, e.g. alert(response.error)
//or this.error=response.error
}
else
this.router.navigateByUrl('/shop'),
}
error: error => 
{
this.errors = error.errors
}
});

register(values: any) {
return this.http.post<User>(this.baseUrl + 'account/register', values).pipe(
tap((res:any) => {
if (!res.error)
{
//store "res.data.token"
localStorage.setItem('token', res.data.token);
this.currentUserSource.next(res.data);
}
})
)
}

formControl!:FormControl
@Input('formControl') set _formControl(value:AbstractControl){
this.formControl=value as FormControl;
}