title: password and confirmpassword validation in angular using reactive forms
body: <p>i have attached my code below .im facing problem in adding password mismatch validation.im not getting validation error if i type mismatching password</p>
  
  <p><strong>register.component.html</strong></p>
  
  <pre><code>&lt;div class="form-group row mt-3"&gt;
   &lt;label class="col-md-4 col-lg-4 text-center"&gt;UserName:&lt;span style="color:red"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input kendoTextBox required type="text" class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your UserName " formControlName="username"/&gt;
    &lt;div *ngIf="(submitted||f2.username.touched) &amp;&amp; f2.username.invalid" class="error-msg"&gt;
   &lt;div *ngIf="f2.username.errors.required"&gt;UserName  is required&lt;/div&gt;
   &lt;/div&gt; &lt;/div&gt;
   &lt;div class="form-group row"&gt;
  &lt;label class="col-md-4 col-lg-4 text-center"&gt;Password:&lt;span style="color:red"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input kendoTextBox type="password" required  class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your passowrd " formControlName="password"/&gt;
  
   &lt;div *ngIf="(submitted||f2.password.touched) &amp;&amp; f2.password.invalid" class="error-msg"&gt;
  &lt;div *ngIf="f2.password.errors.required"&gt;password  is required&lt;/div&gt;
  &lt;div *ngIf="f2.password.errors.minlength"&gt;minimum of 6 characters required&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group row"&gt;
     &lt;label class="col-md-4 col-lg-4 text-center"&gt;ConfirmPassword:
  &lt;span style="color:red"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input kendoTextBox required type="password" class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your new password " formControlName="confirmpassword"/&gt;
   &lt;div *ngIf="(submitted||f2.confirmpassword.touched) &amp;&amp; f2.confirmpassword.invalid" class="error-msg"&gt;
   &lt;div *ngIf="f2.confirmpassword.errors.required"&gt; confirm password  is required&lt;/div&gt;  &lt;div *ngIf="f2.confirmpassword.errors.minlength"&gt;minimum of 6 characters required
  &lt;/div&gt;
  &lt;div class="error-msg" *ngIf="f2.errors?.mismatch &amp;&amp; (f2.controls['confirmpassword'].required || f2.controls['confirmpassword'].touched)"&gt;
                                Passwords don't match.
  &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
      enter code here
  </code></pre>
  
  <p><strong>registercomponent.ts file</strong></p>
  
  <p>here i have used formBuilder.other things are working fine  ,only validation for mismatching not working  </p>
  
  <pre><code> this.registerForm3 = this.formBuilder.group({
      username:['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmpassword:['', [Validators.required, Validators.minLength(6)]],
    },
    {validator: this.passwordMatchValidator},
    );
  
  passwordMatchValidator(frm: FormGroup) {
  eturn frm.controls['password'].value === 
  frm.controls['confirmpassword'].value ? null : {'mismatch': true};
      }
   get f2() { 
      return this.registerForm3.controls; 
    }
  </code></pre>