Compare cross field validation in formGroup in angular reactive forms

Question

I am trying to create a registration form which contains fields password and confirmPassword , i have used angular reactive forms and i have used validations of @rxweb package I have used cross field formGroup I have used compare validation from RxwebValidators

Here is my component.ts code :

export class RegisterComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [RxwebValidators.required()]);
  ConfirmPassword = new FormControl("", [RxwebValidators.compare({fieldName:'password '});

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "ConfirmPassword ": this.ConfirmPassword 
    });
  }

I'm not getting a solution how to move further upon this

Happy new year & Welcome to stackoverflow community.. Please consider adding more clarity to your question. Try adding example/expected results and current behavior. It would help us and others to learn and help as well. :) — miiiii
@avni-patel, could you please tell what is not working? Are you getting any error? Consider adding any error you get, to your question. — Gowtham Raj J

piotr szybicki piotr szybicki · Accepted Answer · 2019-01-01T17:16:37

I think you have some syntax problem in your code following code works like a charm

  form:FormGroup;

   constructor(private fb:FormBuilder){}

   ngOnInit(){
     this.form = this.fb.group({
        password : ['', RxwebValidators.required()],
        confirmPassword: ['', RxwebValidators.compare({fieldName:'password'})]
     });
   }

and the tempale

<form id="passwordInputForm" [formGroup]="form">
  <label for="password" >password:</label><input id="password" type="password" formControlName="password">
  <br/>
  <label for="confirmPassword" >confirm password:</label><input id="confirmPassword" type="password" formControlName="confirmPassword">
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

Compare cross field validation in formGroup in angular reactive forms

1 Answers