מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { customValidatorsForJobForm } from 'src/validators/customValidatorsForJobForm';

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.scss']
})
export class FormExampleComponent implements OnInit {
  
  public showPrefix : boolean;
  
  
  public prefixList: string[] = ['050','052','053','054','055','056','057'];
  
  public dontHaveJobYet: boolean;
 
  public jobRegistrationForm : FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.jobRegistrationForm = this.fb.group({
      fullName: this.fb.control('',[Validators.required , Validators.pattern(/[a-zA-Z]+\s+[a-zA-Z]/)]),
      phoneForm: this.fb.group({
        number: ['',[Validators.required , Validators.pattern('[0-9]{7,20}')]],
        prefix: ['',Validators.required]
      }),
      emailForm : this.fb.group({
        email: ['',[Validators.required, Validators.email]],
        reEmail: ['',[Validators.required, Validators.email]]
      },{validators: [customValidatorsForJobForm.emailVerified()]}),
      jobStatus: ['',Validators.required],
      termsApproved : ['',Validators.required]

    });
  }
  displayPrefixlist(): void {
    this.showPrefix = !this.showPrefix;
  }
  choosenPrefix(choosen: string): void {
    this.showPrefix = false;
    this.jobRegistrationForm.get('phoneForm').get('prefix').setValue(choosen);
  }

  checkJobStatus(): void{
    
    this.dontHaveJobYet =  !this.jobRegistrationForm.controls.jobStatus.value;

    if (this.dontHaveJobYet){
      this.jobRegistrationForm.addControl('lastDayJob', this.fb.control('', [Validators.required])); 
    }else {
      this.jobRegistrationForm.removeControl('lastDayJob'); 
    }
  }
  submit(form: any) { 
    console.log(form.value);
  }
}

import { group } from "@angular/animations";
import { FormControl, FormGroup, ValidatorFn } from "@angular/forms";

export class customValidatorsForJobForm {
    static emailVerified() : ValidatorFn {
        return (group: FormGroup)=>{
            if(group.controls.email.value !== group.controls.reEmail.value) {
                return {emailsAreSame : true}
            }else {
                return null;
            }
        };
    }

}

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}