title: Angular 7 form field control error isn't getting removed
body: <p>I'm trying to create a registration page with a password-confirm and email-confirm field where the user has to repeat their password and email. This is the setup of the <code>FormGroup</code>:</p>
  
  <pre><code>ngOnInit() {
  this.basicInfo = this.formBuilder.group({
    userName: ['', [Validators.required, Validators.minLength(5)]],
    firstName: ['', Validators.required],
    lastName: ['',Validators.required],
  
    emails: this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      emailConfirm: ['', [Validators.required, Validators.email]],
    }, {validators: SignUpComponent.checkEmailMatch}),
  
    passwords: this.formBuilder.group({
      password: ['', [Validators.required]],
      passwordConfirm: ['', Validators.required]
    }, {validators: SignUpComponent.checkPasswordMatch})
  });
  </code></pre>
  
  <p>The validator for the password fields is the following (the same for email):</p>
  
  <pre><code>static checkPasswordMatch(group: FormGroup) {
    let password = group.get('password');
    let passwordConfirm = group.get('passwordConfirm');
    if (password == null || passwordConfirm == null) return null; // prevent errors
    let match = password.value === passwordConfirm.value;
    if (!match) {
      passwordConfirm.setErrors({passwordMatchError: true});
      return {passwordMatchError: true};
    } else {
      return {passwordMatchError: null};
    }
  }
  </code></pre>
  
  <p><strong>Expected results</strong></p>
  
  <p>The validator should update whenever <code>password</code> or <code>passwordConfirmed</code> are edited, and add the appropriate error to the <code>passwordConfirmed</code> control if their values are not identical.</p>
  
  <p><strong>What actually happens</strong></p>
  
  <p>The error is only removed when <code>passwordConfirmed</code> is edited (adding the error works when either is edited)</p>
  
  <h1>Attempted solution</h1>
  
  <p>I tried modifying the if statement in the validator to remove the error from <code>passwordConfirm</code>:</p>
  
  <pre><code>if (!match) {
    passwordConfirm.setErrors({passwordMatchError: true});
    return {passwordMatchError: true};
  } else {
    passwordConfirm.setErrors({passwordMatchError: null}); &lt;-- this line
    return {passwordMatchError: null};
  }
  </code></pre>
  
  <p>This does not remove the error, but instead just sets it to null. The control is still marked as invalid and the error is still there as indicated by this log to the console:</p>
  
  <p><a href="https://i.stack.imgur.com/C6wpV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C6wpV.png" alt="console log showing error"></a></p>
  
  <p>Are there any other ways of manually removing an error from a form control or is there another way to solve this?</p>
  
  <p>(Angular &amp; Angular forms version 7.2.0)</p>