Multiple validator for call method in FormBuilder

Question

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

Owen Kelvin · Accepted Answer · 2020-10-23 03:39:46Z

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: ["[email protected]", [Validators.required, Validators.email]],
      confirmEmail: ["[email protected]", [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

Collectives™ on Stack Overflow

Multiple validator for call method in FormBuilder

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related