Custom validation for reactive forms, Validators for two nested inputs,

I let you here one implementation.

https://stackblitz.com/edit/angular-hm7967

And paste the code here anyway.

Template

<div>

<form [formGroup]="formGroup">
<label for="fieldOne" id="fieldOne">Field One: </label>
<input type="text" formControlName="fieldOne"/><br/>
<label for="fieldTwo">Field Two: </label>
<input type="text" id="fieldTwo" formControlName="fieldTwo" />

</form>

<pre>
  {{formGroup.valid}}
</pre>

</div>

Component

    import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public formGroup: FormGroup;

  constructor(){
    this.formGroup = new FormGroup({
      fieldOne: new FormControl('', [Validators.required]),
      fieldTwo: new FormControl('', [Validators.required]),
    }, [
      this.customValidation
    ]);
  }

  private customValidation(form: FormGroup){
    console.log(form);
    const fieldOne : AbstractControl = form.get('fieldOne');
    const fieldTwo : AbstractControl = form.get('fieldTwo');
    if (fieldOne.value === fieldTwo.value) {
        return {
          customValidation: true
        }
    }
    return null;
  }

}