rona-frontend/src/app/account/register/register.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { first } from 'rxjs/operators';

import { AccountService } from '../account.service';
import { PasswordErrorStateMatcher } from './password-error-state-matcher';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  form = this.formBuilder.group({
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: this.formBuilder.group({
      first: ['', [Validators.required, Validators.minLength(15)]],
      second: ['', [Validators.required, Validators.minLength(15)]],
    },
  { validators: this.passwordsEqual }),
  });
  loading = false;
  passwordErrorStateMatcher = new PasswordErrorStateMatcher();

  constructor(private accountService: AccountService,
              private formBuilder: FormBuilder,
              private router: Router,
              ) { }

  passwordsEqual(passwords: FormGroup): ValidationErrors | null {
    const password1 = passwords.get('first');
    const password2 = passwords.get('second');

    return password1 && password2 && password1.value === password2.value ? null : { mismatch: true };
  }

  readForm() {
    return {
      username: this.form.get('username').value,
      email: this.form.get('email').value,
      password: this.form.get('password').get('first').value,
    }
  }

  onRegister() {
    this.loading = !this.loading;
  }

  constructor() { }

  ngOnInit(): void { }
}