Multiple validator for call method in FormBuilder

I create a register form. There are two fields for password and email.

In the second field from password and email I would like to check whether the first is the same as in the second.

If I check just one, password or email, it works, but for both it doesn't work...

this.registerForm = this.formBuilder.group({
      email: '', [Validators.required, Validators.email],
      confirmEmail: '', [Validators.required],
      password: '', [Validators.required],
      confirmPassword: '', [Validators.required],
    }, {
      validator: matchingFields('password', 'confirmPassword')
    });

How can I add a second validator?

this.registerForm = this.formBuilder.group({
      email: '', [Validators.required, Validators.email],
      confirmEmail: '', [Validators.required],
      password: '', [Validators.required],
      confirmPassword: '', [Validators.required],
    }, {
      validator: matchingFields('password', 'confirmPassword'),
      // this doesn't work
      validator: matchingFields('email', 'confirmEmail')
    });

Then the method (matchingFields) is the same for password and email:

function matchingFields(field1, field2) {
  return form => {
    if (form.controls[field1].value !== form.controls[field2].value) {
      return {mismatchedFields: true};
    }
  };
}

I can't found any solution for validator, only for Validators.required, but this isn't my problem. Thanks for any helps

The Syntax you are using to generate the form group is incorrect

The proper syntax should be

this.fb.group({
    control: ['value', [Validator1, Validator2, ...]]
})

In your case this will look like

function confirmed(field: string) {
  const confirmField = 'confirm' + field.replace(/(^|\s)\S/g, t => t.toUpperCase() );
  return form => {
    if (form.get(field).value !== form.get(confirmField).value) {
      return { ['mismatched-' + field]: true };
    }
  };
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private formBuilder: FormBuilder) {}
  name = "Angular " + VERSION.major;
  registerForm = this.formBuilder.group(
    {
      email: ["myEmail@yahoo.com", [Validators.required, Validators.email]],
      confirmEmail: ["myEmail@yahoo.com", [Validators.required]],
      password: ["Password@1", [Validators.required]],
      confirmPassword: ["Password@1", [Validators.required]]
    },
    {
      validators: [confirmed("password"),confirmed("email")]
    }
  );
}

Example HTML

<hello name="{{ name }}"></hello>
<form [formGroup]='registerForm'>
    <input formControlName='email'> {{ registerForm.get('email').status}} <br>
    <input formControlName='confirmEmail'> {{ registerForm.get('confirmEmail').status}} <br>
    <input formControlName='password'> {{ registerForm.get('password').status}}<br>
    <input formControlName='confirmPassword'> {{ registerForm.get('confirmPassword').status}}<br>
</form>

    Password Confirmed Error: <strong>{{ registerForm.getError('mismatched-password')}}</strong> <br>
Email Confirmed: <strong>{{ registerForm.getError('mismatched-email')}}</strong>

    <h1>{{ registerForm.status }}</h1>

See sample on stackblitz