title: Validators required not working with custom validator
body: <p>I am creating a form to create a new user. I am using a custom validator to validate if password and confirm password field values are matching. I've made both the fields mandatory ie they can't be empty.An error is shown if the password field is empty and I try to create a user. However no error is being thrown when the confirm password field is empty.I'm still not able to create a user if the confirm password field is empty but I want the error to be shown. I don't know what to do. Please help. Thanks in advance.</p>
  
  <p>This is my template:</p>
  
  <pre><code>&lt;mat-form-field class="login-field-full-width margin"&gt;
      &lt;input matInput [type]="!hidePassword ? 'password' : 'text'" formControlName="password" placeholder="Password" name="password" class="form-control" id="password"&gt;
  &lt;mat-error *ngIf="addForm.controls.password.hasError('required')"&gt;Password is required&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field class="login-field-full-width"&gt;
   &lt;input matInput formControlName="passwordAgain" placeholder="Confirm password" [type]="!hideConfirmPassword ? 'password' : 'text'" [errorStateMatcher]="passwordsMatcher"&gt;                    
   &lt;mat-error *ngIf="addForm.controls.passwordAgain.hasError('required')"&gt;Confirm Password is required&lt;/mat-error&gt;&lt;mat-error *ngIf="addForm.hasError('passwordsNotEqual')"&gt;Password Mismatch!&lt;/mat-error&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>My custom errorStateMatcher:</p>
  
  <pre><code>export class RepeatPasswordEStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      return (control &amp;&amp; control.parent.get('password').value !== control.parent.get('passwordAgain').value &amp;&amp; control.dirty);
    }
  }
  export function RepeatPasswordValidator(group: FormGroup) {
    const password = group.controls.password.value;
    const passwordConfirmation = group.controls.passwordAgain.value;
  
    return password === passwordConfirmation ? null : { passwordsNotEqual: true };
  }
  </code></pre>
  
  <p>My formGroup:</p>
  
  <pre><code>passwordsMatcher = new RepeatPasswordEStateMatcher;
  this.addForm = this.formBuilder.group({
        id: [],
        username: ['', Validators.required],
        password: new FormControl('', [Validators.required]),
        passwordAgain: new FormControl('', [Validators.required]),
  
      }, { validator: RepeatPasswordValidator });
    }
  
  onSubmit() {
  
      if (this.addForm.valid) {
        this.userService.createUser( this.addForm.value)
          .subscribe();
  
      }
  
    }
  </code></pre>